Tailwind CSS 配置生成器
免费在线Tailwind CSS配置生成器，无需安装。具有可视化tailwind.config.js构建工具。
关于 Tailwind 配置生成器
本工具通过简单的表单生成可直接使用的 Tailwind CSS 配置文件，让你无需手写 JavaScript。设置类名前缀、切换 important 标志，并列出 Tailwind 应扫描的内容路径。你可以添加自定义颜色令牌和字体族，生成器会把它们组装成整洁的 theme.extend 块。所有内容会汇总成一个 tailwind.config.js，方便直接复制到项目中。
使用方法
1. 在「基本」选项卡中设置前缀、important 标志和内容路径 2. 在「颜色」选项卡中添加每个自定义颜色的名称和值 3. 在「字体」选项卡中添加每个字体族及其逗号分隔的字体栈 4. 打开「输出」选项卡并点击「生成」 5. 检查文件，然后「复制」到你的项目中
最佳效果建议
每行写一个内容路径，以便 Tailwind 扫描正确的文件来收集类名。自定义颜色会变成工具类（如 bg-primary 或 text-brand），字体条目会变成 font-sans 或你选择的任意名称。空白部分会被自动省略，即使你只填了颜色或字体，生成的文件依然整洁。输出采用现代 ESM export 格式，顶部带 Tailwind 类型提示。
▶prefix 选项有什么作用？
它在每个 Tailwind 工具类前添加自定义前缀，例如前缀为 tw- 时 bg-red-500 会变成 tw-bg-red-500。有助于避免与其他 CSS 冲突。
▶important 标志是什么？
启用后，Tailwind 工具类会使用 !important 标志以覆盖其他样式。除非确实需要该覆盖行为，否则请关闭。
▶内容路径如何使用？
它们告诉 Tailwind 扫描哪些文件来收集类名，从而只生成你实际用到的 CSS。每行一个 glob 模式，例如 ./src/**/*.{js,ts,jsx,tsx}。
▶如何添加字体族？
在「字体」选项卡输入名称（如 sans）和逗号分隔的字体栈（如 Inter, system-ui, sans-serif）。生成器会把它拆分成配置中的数组。
▶输出是什么格式？
一个使用 ESM export default 语法的 tailwind.config.js 文件，第一行带 Tailwind 类型注释。仅包含你填写过的部分。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。