要充分利用 Tailwind，你需要一个构建步骤。这是自定义你的 tailwind.config.js 文件、使用 @apply 提取组件或包含 插件 的唯一方式。
🌐 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 在线 playground，允许你直接在浏览器中使用 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 主题
- 启用特殊变体，如
group-hover或focus-within - 在你的 CSS 中使用自定义指令，如
@apply、@variants和@responsive - 添加像
@tailwindcss/typography这样的插件 - 智能代码补全和 linting
- 响应式设计模式
- 一键分享
代码补全甚至会实时更新渲染预览，这在浏览器中创造了令人难以置信的设计工作流程——例如，只需使用箭头键浏览不同的内边距工具，就能找到完美的数值，而无需保存文件甚至按下回车键！
🌐 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 查看 并告诉我们你的想法！
想讨论这篇文章吗？ 在 GitHub 上讨论 →