小丫设计工具站
返回工具合集
Tailwind 配置在线生成器
可视化编辑Tailwind主题参数,一键生成tailwind.config.js配置文件,支持自定义颜色、字体、断点与插件,前端本地运算,数据不上传服务器
快速预设模板
🛒电商站点
📦极简基础
🚀落地页面
📊后台管理
🎨主题颜色
📝字体配置
📐间距尺寸
📱响应断点
🔌插件选项
自定义主题色彩
×
×
×
+新增自定义颜色
字体族扩展配置
×
×
+新增字体配置项
启用自定义字号选项
xs (0.75rem)
sm (0.875rem)
base (1rem)
lg (1.125rem)
xl (1.25rem)
2xl (1.5rem)
基础间距单位(rem)
自定义间距尺寸
0
1
2
4
8
16
32
64
响应式屏幕断点
×
×
×
×
×
+新增断点配置
官方扩展插件选择
@tailwindcss/forms
@tailwindcss/aspect-ratio
@tailwindcss/typography
@tailwindcss/container-queries
全局功能选项
暗黑模式class方案
Preflight样式重置
JIT编译模式
tailwind.config.js 生成结果
📋复制配置
💾下载文件
🔄重置全部
📖工具使用说明
快速预设模板:一键加载电商、后台、落地页、极简4套预设主题,加载后可继续二次修改参数。
主题颜色:自定义扩展色名与色值,支持颜色拾取器预览,添加后可直接在项目中使用 text-xxx / bg-xxx。
字体配置:扩展自定义字体族,填写字体名称与字体栈,可多选启用常用字号。
间距尺寸:修改基础rem单位,自定义项目内margin/padding可用间距值。
响应断点:增删屏幕断点名称和像素,自定义移动端、平板、桌面端媒体查询阈值。
插件选项:勾选需要的Tailwind官方插件,会自动写入配置文件的plugins数组。
右侧预览:实时生成完整tailwind.config.js代码,支持一键复制或者直接下载js文件到本地。
所有运算全部在浏览器本地完成,配置信息不会上传服务器,不用担心配置泄露。
使用方式:复制/下载配置文件后,放到项目根目录,配合Tailwind CSS正常编译使用。
操作完成