Tailwind 配置生成器

工作原理

无需手动编写 Tailwind CSS 配置对象,只需在上面的表单中填写您的品牌颜色、字体系列和附加间距:该工具会实时组装一个有效的 tailwind.config.js 文件,其中 theme.extend 部分结构正确,可直接替换您现有的文件。

为什么要使用 theme.extend 而不是直接使用 theme?

将您的新增内容放在 theme.extend 中可以保留 Tailwind 的所有默认值(标准颜色、尺寸、间距),同时添加您自己的值;直接重新定义 theme 会完全替换默认值,这通常不是您想要的效果。

选择暗黑模式"class"或"media"意味着什么?

使用 class 时,暗黑模式通过在父元素(通常是 <html>)上添加 dark 类来激活,这样就可以通过 JavaScript 手动切换;使用 media 时,Tailwind 会自动跟随用户的系统偏好,无法手动控制。

配置文件直接在您的浏览器中生成,不会向服务器发送任何数据。