要充分利用 Tailwind，你需要一个构建步骤。这是能够自定义 tailwind.config.js 文件、使用 @apply 提取组件或包含 plugins 的唯一方法。
¥To get the most out of Tailwind, you need a build step. It's the only way to be able to customize your tailwind.config.js file, extract components with @apply, or include plugins.
如果你已经购买了该框架，这不是问题，但如果你是第一次尝试，就会遇到很多麻烦。你要么必须设置支持 PostCSS 的本地开发环境，要么坚持使用静态 CDN 构建，这意味着你会失去很多很棒的功能。
¥This isn't a problem if you've already bought in to the framework, but if you're just trying to kick the tires for the first time it's a lot of friction. You either have to set up a local development environment with PostCSS support, or stick to the static CDN build, which means you lose out on lots of cool features.
今天，我们很高兴发布 Tailwind Play 的第一个版本，这是一个先进的 Tailwind CSS 在线游乐场，可让你直接在浏览器中使用 Tailwind 的所有构建时功能。
¥So today we're excited to release the first version of Tailwind Play, an advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
它支持 Tailwind 所有最酷的功能，以及大量在 Tailwind Play 中比在编辑器中更好的功能，例如：
¥It includes support for all of Tailwind's coolest features, plus tons of stuff that's even better in Tailwind Play than it is in your editor, like:
-
自定义你的 Tailwind 主题
¥Customizing your Tailwind theme
-
启用特殊变体，例如
group-hover或focus-within¥Enabling special variants, like
group-hoverorfocus-within -
在 CSS 中使用自定义指令，例如
@apply、@variants和@responsive¥Using custom directives in your CSS like
@apply,@variants, and@responsive -
添加类似
@tailwindcss/typography的插件¥Adding plugins like
@tailwindcss/typography -
智能代码补全和 linting
¥Intelligent code completion and linting
-
响应式设计模式
¥Responsive design mode
-
一键分享
¥One-click sharing
代码补全功能甚至会实时更新渲染预览，这在浏览器中创建了一个令人难以置信的设计工作流程 - 例如，只需使用箭头键浏览不同的填充工具，即可找到最合适的值，而无需保存文件，甚至无需按回车键！
¥The code completion even updates the rendered preview in real-time, which creates an incredible design workflow in the browser — just navigate through different padding utilities with the arrow keys for example to find the perfect value without ever saving the file or even hitting enter!
我们的响应式设计模式可让你在设计过程中微调视口，就像在 Chrome DevTools 中一样。你甚至可以将视口拖到可用空间之外，预览区域将自动缩小，让你即使在空间有限的情况下也能为更大的屏幕进行设计。
¥Our responsive design mode that lets you fine-tune the viewport while you're working on your design, just like you can in Chrome DevTools. You can even drag the viewport beyond the available space, and the preview area will automatically zoom out, letting you design for larger screens even when you have limited space.
一键分享真的就是这么简单 - 你甚至不需要创建账户。点击 "分享"，你将立即获得一个链接，指向你正在处理的工作快照，你可以将其在线分享。
¥One-click sharing really is just that — you don't even need to create an account. Click "Share" and you've immediately got a link to a snapshot of what you're working on that you can share online.
在 play.tailwindcss.com 查看并告诉我们你的想法！
¥Check it out at play.tailwindcss.com and let us know what you think!
想要讨论这篇文章吗？Discuss this on GitHub →
¥Want to talk about this post? Discuss this on GitHub →