介绍 Tailwind Play

为了充分利用 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 上讨论 →