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