要充分利用 Tailwind，您需要一个构建步骤。这是能够自定义您的 tailwind.config.js 文件、使用 @apply 提取组件或包含插件的唯一方法。
如果您已经认可了这个框架，这不是问题，但如果您只是第一次尝试使用，这会带来很多摩擦。您要么需要设置一个支持 PostCSS 的本地开发环境，要么坚持使用静态的 CDN 构建，这意味着您会错过许多很酷的功能。
所以今天我们很高兴发布 Tailwind Play 的第一个版本，这是一个高级的在线 Tailwind CSS 游乐场，让您可以直接在浏览器中使用所有 Tailwind 的构建时功能。
它支持所有 Tailwind 最酷的功能，而且很多东西在 Tailwind Play 中比在您的编辑器中更好，比如：
- 自定义您的 Tailwind 主题
- 启用特殊变体，如
group-hover或focus-within - 在您的 CSS 中使用自定义指令，如
@apply、@variants和@responsive - 添加插件，如
@tailwindcss/typography - 智能代码补全和检查
- 响应式设计模式
- 一键分享
代码补全甚至会在_实时_更新渲染的预览，这在浏览器中创造了一个令人难以置信的设计工作流程 — 例如，只需使用箭头键浏览不同的内边距实用工具，就能找到完美的值，而无需保存文件甚至按回车键！
我们的响应式设计模式让您可以在工作时像在 Chrome DevTools 中那样微调视口。您甚至可以将视口拖动到可用空间之外，预览区域会自动缩小，让您即使在空间有限的情况下也能设计更大的屏幕。
一键分享确实就是那么简单 — 您甚至不需要创建账户。点击"分享"，您就立即得到一个可以在线分享的快照链接。
在 play.tailwindcss.com 上查看并让我们知道您的想法！
想讨论这篇文章吗？在 GitHub 上讨论 →