要充分利用 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 - 智能代码补全和 linting
- 响应式设计模式
- 一键分享
代码补全甚至会在 实时 中更新渲染的预览，这在浏览器中创建了一个令人难以置信的设计工作流程 — 例如，只需使用箭头键浏览不同的填充工具以找到完美的值，而无需保存文件或按回车键！
我们的响应式设计模式允许您在工作时微调视口，就像您在 Chrome 开发者工具中一样。您甚至可以将视口拖动到可用空间之外，预览区域会自动缩小，让您在空间有限的情况下为更大屏幕设计。
一键分享确实就是这样 — 您甚至不需要创建帐户。点击“分享”，您将立即获得一个链接，该链接指向您正在进行的快照，可以在线分享。
请在 play.tailwindcss.com 查看，并告诉我们您的想法！
想讨论这篇文章？ 在 GitHub 讨论 →