- Tailwind CSS 教程
- Tailwind CSS - 首页
- Tailwind CSS - 路线图
- Tailwind CSS - 简介
- Tailwind CSS - 安装
- Tailwind CSS - 编辑器设置
- Tailwind CSS - 核心概念
- Tailwind CSS - 实用优先基础
- Tailwind CSS - 悬停、焦点和其他状态
- Tailwind CSS - 响应式设计
- Tailwind CSS - 深色模式
- Tailwind CSS - 重用样式
- Tailwind CSS - 添加自定义样式
- Tailwind CSS - 函数和指令
- Tailwind CSS - 自定义
- Tailwind CSS - 配置
- Tailwind CSS - 内容配置
- Tailwind CSS - 主题配置
- Tailwind CSS - 自定义屏幕
- Tailwind CSS - 自定义颜色
- Tailwind CSS - 自定义间距
- Tailwind CSS - 插件
- Tailwind CSS - 预设
- Tailwind CSS - 基础样式
- Tailwind CSS - 预加载
- Tailwind CSS - 布局
- Tailwind CSS - 宽高比
- Tailwind CSS - 容器
- Tailwind CSS - 列
- Tailwind CSS - 断页符后
- Tailwind CSS - 断页符前
- Tailwind CSS - 断页符内
- Tailwind CSS - 盒子装饰断开
- Tailwind CSS - 盒子大小
- Tailwind CSS - 显示
- Tailwind CSS - 浮动
- Tailwind CSS - 清除浮动
- Tailwind CSS - 隔离
- Tailwind CSS - 对象适配
- Tailwind CSS - 对象位置
- Tailwind CSS - 溢出
- Tailwind CSS - 滚动行为
- Tailwind CSS - 位置
- Tailwind CSS - 上/右/下/左
- Tailwind CSS - 可见性
- Tailwind CSS - Z 轴索引
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - Flex 基准
- Tailwind CSS - Flex 方向
- Tailwind CSS - Flex 换行
- Tailwind CSS - Flex
- Tailwind CSS - Flex 增长
- Tailwind CSS - Flex 缩小
- Tailwind CSS - 顺序
- Tailwind CSS - 网格模板列
- Tailwind CSS - 网格列开始/结束
- Tailwind CSS - 网格模板行
- Tailwind CSS - 网格行开始/结束
- Tailwind CSS - 网格自动流
- Tailwind CSS - 网格自动列
- Tailwind CSS - 网格自动行
- Tailwind CSS - 间隙
- Tailwind CSS - 对齐内容
- Tailwind CSS - 对齐项目
- Tailwind CSS - 自对齐
- Tailwind CSS - 内容对齐
- Tailwind CSS - 项目对齐
- Tailwind CSS - 自身对齐
- Tailwind CSS - 内容放置
- Tailwind CSS - 项目放置
- Tailwind CSS - 自身放置
- Tailwind CSS - 间距
- Tailwind CSS - 内边距
- Tailwind CSS - 外边距
- Tailwind CSS - 元素间距
- Tailwind CSS - 大小
- Tailwind CSS - 宽度
- Tailwind CSS - 最小宽度
- Tailwind CSS - 最大宽度
- Tailwind CSS - 高度
- Tailwind CSS - 最小高度
- Tailwind CSS - 最大高度
- Tailwind CSS - 尺寸
- Tailwind CSS - 排版
- Tailwind CSS - 字体系列
- Tailwind CSS - 字体大小
- Tailwind CSS - 字体平滑
- Tailwind CSS - 字体样式
- Tailwind CSS - 字体粗细
- Tailwind CSS - 字体变体数字
- Tailwind CSS - 字间距
- Tailwind CSS - 行高限制
- Tailwind CSS - 行高
- Tailwind CSS - 列表样式图像
- Tailwind CSS - 列表样式位置
- Tailwind CSS - 列表样式类型
- Tailwind CSS - 文本对齐
- Tailwind CSS - 文本颜色
- Tailwind CSS - 文本装饰
- Tailwind CSS - 文本装饰颜色
- Tailwind CSS - 文本装饰样式
- Tailwind CSS - 文本装饰粗细
- Tailwind CSS - 文本下划线偏移
- Tailwind CSS - 文本转换
- Tailwind CSS - 文本溢出
- Tailwind CSS - 文本换行
- Tailwind CSS - 文本缩进
- Tailwind CSS - 垂直对齐
- Tailwind CSS - 空格
- Tailwind CSS - 断词
- Tailwind CSS - 连字符
- Tailwind CSS - 内容
- Tailwind CSS - 背景
- Tailwind CSS - 背景附件
- Tailwind CSS - 背景裁剪
- Tailwind CSS - 背景颜色
- Tailwind CSS - 背景原点
- Tailwind CSS - 背景位置
- Tailwind CSS - 背景重复
- Tailwind CSS - 背景尺寸
- Tailwind CSS - 背景图像
- Tailwind CSS - 渐变颜色停止
- Tailwind CSS - 边框
- Tailwind CSS - 边界半径
- Tailwind CSS - 边框宽度
- Tailwind CSS - 边框颜色
- Tailwind CSS - 边框样式
- Tailwind CSS - 分割宽度
- Tailwind CSS - 分割颜色
- Tailwind CSS - 分割样式
- Tailwind CSS - 轮廓宽度
- Tailwind CSS - 轮廓颜色
- Tailwind CSS - 轮廓样式
- Tailwind CSS - 轮廓偏移
- Tailwind CSS - 环宽度
- Tailwind CSS - 环颜色
- Tailwind CSS - 环偏移宽度
- Tailwind CSS - 环偏移颜色
- Tailwind CSS - 效果
- Tailwind CSS - 盒子阴影
- Tailwind CSS - 盒子阴影颜色
- Tailwind CSS - 不透明度
- Tailwind CSS - 混合模式
- Tailwind CSS - 背景混合模式
- Tailwind CSS - 过滤器
- Tailwind CSS - 模糊
- Tailwind CSS - 亮度
- Tailwind CSS - 对比度
- Tailwind CSS - 投影
- Tailwind CSS - 灰度
- Tailwind CSS - 色相旋转
- Tailwind CSS - 反转
- Tailwind CSS - 饱和度
- Tailwind CSS - 棕褐色
- Tailwind CSS - 背景模糊
- Tailwind CSS - 背景亮度
- Tailwind CSS - 背景对比度
- Tailwind CSS - 背景灰度
- Tailwind CSS - 背景色相旋转
- Tailwind CSS - 背景反转
- Tailwind CSS - 背景不透明度
- Tailwind CSS - 背景饱和度
- Tailwind CSS - 背景棕褐色
- Tailwind CSS - 表格
- Tailwind CSS - 边框折叠
- Tailwind CSS - 边框间距
- Tailwind CSS - 表格布局
- Tailwind CSS - 标题位置
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 过渡属性
- Tailwind CSS - 过渡持续时间
- Tailwind CSS - 过渡定时函数
- Tailwind CSS - 过渡延迟
- Tailwind CSS - 动画
- Tailwind CSS - 变换
- Tailwind CSS - 缩放
- Tailwind CSS - 旋转
- Tailwind CSS - 平移
- Tailwind CSS - 倾斜
- Tailwind CSS - 变换原点
- Tailwind CSS - 交互性
- Tailwind CSS - 重音颜色
- Tailwind CSS - 外观
- Tailwind CSS - 光标
- Tailwind CSS - 光标颜色
- Tailwind CSS - 指针事件
- Tailwind CSS - 调整大小
- Tailwind CSS - 滚动行为
- Tailwind CSS - 滚动边距
- Tailwind CSS - 滚动填充
- Tailwind CSS - 滚动捕捉对齐
- Tailwind CSS - 滚动捕捉停止
- Tailwind CSS - 滚动捕捉类型
- Tailwind CSS - 触摸操作
- Tailwind CSS - 用户选择
- Tailwind CSS - 将更改
- Tailwind CSS - SVG
- Tailwind CSS - 填充
- Tailwind CSS - 描边
- Tailwind CSS - 描边宽度
- Tailwind CSS - 可访问性
- Tailwind CSS - 屏幕阅读器
- Tailwind CSS - 强制颜色调整
- Tailwind CSS - 附加
- Tailwind CSS - 与预处理器一起使用
- Tailwind CSS - 优化生产
- Tailwind CSS - 参考
- Tailwind CSS - 核心概念
- Tailwind CSS - 自定义
- Tailwind CSS - 布局
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - 间距
- Tailwind CSS - 大小
- Tailwind CSS - 排版
- Tailwind CSS - 背景
- Tailwind CSS - 边框
- Tailwind CSS - 效果
- Tailwind CSS - 过滤器
- Tailwind CSS - 表格
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 转换
- Tailwind CSS - 交互性
- Tailwind CSS - 资源
- Tailwind CSS - 讨论
- Tailwind CSS - 有用资源
Tailwind CSS - 预设
Tailwind CSS 预设允许您创建自己的可重用配置预设。
当您将自己的配置添加到 tailwind.config.js 时,它会与默认配置合并。您的更改会覆盖或添加到默认设置。
presets 选项允许您使用不同的基础配置,从而可以轻松地在多个项目中重用自定义设置。
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('@acmecorp/tailwind-base') ], // ... }
创建预设
预设与您放在 tailwind.config.js 文件中的自定义设置相同。
// Example preset module.exports = { theme: { colors: { blue: { light: '#85d7ff', DEFAULT: '#1fb6ff', dark: '#009eeb', }, pink: { light: '#ff7ce5', DEFAULT: '#ff49db', dark: '#ff16d1', }, gray: { darkest: '#1f2d3d', dark: '#3c4858', DEFAULT: '#c0ccda', light: '#e0e6ed', lightest: '#f9fafc', } }, fontFamily: { sans: ['Graphik', 'sans-serif'], }, extend: { flexGrow: { 2: '2', 3: '3', }, zIndex: { 60: '60', 70: '70', 80: '80', 90: '90', 100: '100', }, } }, plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), ], }
要使用预设,请将其添加到项目的 tailwind.config.js 文件的“presets”部分。
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('./my-preset.js') ], // Customizations specific to this project would go here theme: { extend: { minHeight: { 48: '12rem', } } }, }
预设通常会添加到 Tailwind 的默认值中。要从头开始,请添加一个空的“presets”键以覆盖默认值。
// Example preset module.exports = { presets: [], theme: { // ... }, plugins: [ // ... ], }
深入合并逻辑
项目特定的配置(在 tailwind.config.js 中)与预设合并,就像它们与默认设置合并一样。
tailwind.config.js 中的以下选项如果在预设中存在,则只会替换相同的选项
- content
- darkMode
- prefix
- important
- variantOrder
- separator
- safelist
其余选项以对每个选项都有意义的方式合并,下面将详细解释。
主题
组合主题设置时,tailwind.config.js 会替换预设设置。但扩展设置会从所有来源合并并添加到顶部。
预设
预设可以嵌套,这意味着一个预设可以包含另一个预设,依此类推。
插件
预设插件与项目插件合并。这意味着您无法禁用预设添加的插件。如果您想禁用预设插件,请将其从预设中移除,并将其添加到各个项目中。
核心插件
corePlugins 选项的行为取决于您是将其配置为对象还是数组。
module.exports = { // ... corePlugins: { float: false, }, }
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('./my-preset.js'), ], // This configuration will be merged corePlugins: { cursor: false } }
如果将 corePlugins 配置为数组,它将替换配置的预设提供的任何 corePlugins 配置。
module.exports = { // ... corePlugins: { float: false, }, }
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('./example-preset.js'), ], // This will replace the configuration in the preset corePlugins: ['float', 'padding', 'margin'] }
扩展多个预设
Presets 是一个包含多个自定义的数组,可以轻松地重用和组合它们。
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('@acmecorp/tailwind-colors'), require('@acmecorp/tailwind-fonts'), require('@acmecorp/tailwind-spacing'), ] }
当多个预设重叠时,最后一个应用的预设优先。
例如,如果这两个配置都提供了一个自定义调色板(并且没有使用 extend),则将使用配置 b 中的调色板
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('@acmecorp/configuration-a'), require('@acmecorp/configuration-b'), ] }
禁用默认配置
禁用默认值 要从头开始,请将 presets 设置为空数组。这将删除所有 Tailwind 的默认设置,包括颜色、字体和间距。
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [], // ... }
您还可以创建一个独立的设计系统在预设中。
module.exports = { presets: [], // ... }
/** @type {import('tailwindcss').Config} */ module.exports = { presets: [ require('./my-preset.js') ], // ... }