Tailwind配置生成器

可视化定制Tailwind CSS主题:颜色、字体、间距、断点、圆角,一键生成tailwind.config.js配置文件。

主题色(primary)

色阶50为最浅,900为最深。

字体

断点

圆角

tailwind.config.js

关于 Tailwind配置生成器

Tailwind CSS是一款原子化CSS框架,通过tailwind.config.js可定制主题色、字体、间距、断点、圆角等设计令牌。本工具帮助你不写代码即可生成配置文件,快速搭建符合品牌风格的设计系统。

使用步骤

  • 1. 调整primary色阶(建议从500开始反向推算明暗)。
  • 2. 修改字体栈,确保跨平台兼容。
  • 3. 设置断点适配移动/平板/桌面。
  • 4. 复制或下载tailwind.config.js到项目根目录。

常用主题键

  • colors:自定义颜色,含primary、secondary等。
  • fontFamily:字体栈配置。
  • screens:响应式断点。
  • borderRadius:圆角令牌。
  • extend:扩展而非覆盖默认主题。