Tailwind 配置生成器
生成 Tailwind CSS 配置：v3 输出 tailwind.config.js（content / darkMode / theme.extend / plugins），v4 输出 @theme 与 @source 的 CSS，可选品牌色阶、间距、字体、圆角与断点扩展。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
Tailwind 设置
v3 生成 tailwind.config.js，v4 生成带 @theme 的入口 CSS。
主题扩展
勾选后会在 theme.extend（v3）或 @theme（v4）里补上对应的 token。
官方插件
生成的配置
tailwind.config.jstailwindcss/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#EFF5FE',
100: '#D8E6FD',
300: '#9DC1FB',
500: '#3B82F6',
700: '#295BAC',
900: '#183462',
},
},
},
},
};
这个工具能做什么
- 新项目接入 Tailwind：勾好 content 路径、暗色模式与品牌色，直接得到可用的 tailwind.config.js。
- 从 Tailwind v3 升到 v4：同一套设置切成 v4，就能看到 @theme / @source / @custom-variant 的对应写法。
- 设计给了品牌主色但只给了一个色值，用色阶生成器补齐 50–900，避免手工凑浅色深色。
- 需要排版或表单样式时，顺手把官方插件勾上，拿到正确的 import 名与 plugins 数组。
示例
输入
版本 v3，content 为 ./index.html 与 ./src/**/*.{js,ts,jsx,tsx}，暗色模式 class，品牌主色 #3b82f6，勾选 typography 插件输出
import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#EFF5FE',
100: '#D8E6FD',
300: '#9DC1FB',
500: '#3B82F6',
700: '#295BAC',
900: '#183462',
},
},
},
},
plugins: [typography],
};切成 v4 后输出变成 CSS：@import "tailwindcss"、两条 @source、@custom-variant dark 与 @theme 里的 --color-brand-500: #3B82F6，插件则写成 @plugin "@tailwindcss/typography"。
常见问题
v3 和 v4 的配置写法差在哪里？
v3 用 JS 配置文件：content、darkMode、theme.extend、plugins 都写在 tailwind.config.js 里；v4 改成 CSS 优先，入口 CSS 里 @import "tailwindcss" 之后用 @source 声明扫描路径、@theme 定义设计 token、@plugin 加载插件，darkMode 用 @custom-variant 自定义变体。
content 路径写错会怎样？
路径写错时 Tailwind 扫不到模板文件，产出的 CSS 里就只剩下用到的类名——页面样式会「少了几个类」。注意路径里的空格会让 glob 失效，所以工具会拒绝含空格的路径；路径本身是否正确仍要你按项目结构确认。
品牌色阶是怎么算出来的？
以主色为 500，向白色按 92% / 80% / 50% 混合得到 50、100、300，向黑色按 30% / 60% 混合得到 700、900。这是常见的设计系统做法，颜色偏色时直接改这几个值即可，不必重新生成整份配置。
暗色模式的 class 和 selector 有什么区别？
class 对应手动切换，HTML 上挂 .dark 即可；selector 用自定义选择器（这里是 [data-theme=dark]），适合把主题写在 <html data-theme> 上的项目。v4 里这两种都要写 @custom-variant，media 则是默认行为不需要声明。
生成的配置会自动帮我装 Tailwind 吗？
不会。结果区会列出需要安装的包（tailwindcss 以及勾选的官方插件），安装与引入入口 CSS、配置 PostCSS 或 Vite 插件的步骤仍由你完成；页面在你的浏览器里运行，不联网也不写文件。
关键词：tailwindtailwindcsstailwind configtailwind.config.jstailwind v4@themetailwind 配置原子化 CSS主题扩展前端工程化