Tailwind CSS 配置

Tailwind CSS 的核心配置文件为 tailwind.config.js。

tailwind.config.js 是 Tailwind CSS 的配置文件，用于定制化 Tailwind 的默认配置。

通过修改 tailwind.config.js 文件，开发者可以自定义颜色、间距、字体、断点等设计系统，满足特定项目需求。

创建配置文件

使用 Tailwind CSS 的 CLI 工具可以快速生成一个基础的 tailwind.config.js 文件。

在项目根目录下运行以下命令：

npx tailwindcss init

这将创建一个包含基本配置的 tailwind.config.js 文件。

基本结构

以下是一个典型的 tailwind.config.js 文件的结构：

实例

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,vue}"], // 定义需要扫描的模板文件路径
theme: {
extend: {}, // 自定义扩展
},
plugins: [], // 配置插件
}

以上代码告诉 Tailwind CSS 扫描 src 目录下的所有 .html, .js, 和 .vue 文件。

主要配置项

1、配置模板路径：content

在 tailwind.config.js 文件中，content 选项用于指定 Tailwind CSS 应该扫描哪些文件以收集类名。

content: [
  "./index.html", // 单文件路径
  "./src/**/*.{html,js,ts,jsx,tsx}", // 包含多个文件类型的路径
],

这将告诉 Tailwind CSS 扫描 src 目录下的所有 .html、.js、.ts\.jsx 和 .tsx 文件。

content 字段用于指定 Tailwind 的模板文件路径，Tailwind 会扫描这些文件以生成必要的样式，减少生成的 CSS 文件体积，只生成模板文件中使用的样式，防止未使用的样式被编译到最终输出中。

2、自定义主题：theme

在 theme 部分，你可以定义颜色、字体、间距、边框大小等。

例如，扩展默认的颜色或添加新的颜色：

theme: {
  extend: {
    colors: {
      cyan: '#9cdbff',
    }
  }
}

这将添加一个名为 cyan 的新颜色，你可以在项目中使用 bg-cyan 这样的类名。

配置项	描述	示例
`fontSize`	自定义字体大小	`javascript fontSize: { 'xs': '0.75rem', '4xl': '2.5rem', },`
`screens`	定义断点（响应式设计）	`javascript screens: { 'sm': '640px', 'xl': '1280px', },`
`borderRadius`	自定义圆角	`javascript borderRadius: { 'lg': '1rem', 'xl': '1.5rem', },`
`extend`	扩展现有默认值	`javascript extend: { colors: { danger: '#FF5A5F', }, },`

实例

theme: {
extend: {
colors: {
primary: '#1D4ED8',
secondary: '#64748B',
},
spacing: {
18: '4.5rem', // 新增 4.5rem 的间距
},
fontSize: {
'4xl': '2.5rem',
},
borderRadius: {
'xl': '1.5rem',
},
screens: {
'2xl': '1536px', // 添加新的响应式断点
},
},
}

通过 theme.colors 定义颜色，并在样式中引用。

theme: {
  extend: {
    colors: {
      brand: {
        light: '#93C5FD',
        DEFAULT: '#3B82F6',
        dark: '#1E40AF',
      },
    },
  },
}

实例

<div class="bg-brand text-brand-light">Custom Colors Example</div>

尝试一下 »

通过 darkMode 开启 Tailwind 的暗色模式支持。

module.exports = {
  darkMode: 'class', // 或 'media'
  theme: {
    extend: {
      colors: {
        background: {
          light: '#FFFFFF',
          dark: '#000000',
        },
      },
    },
  },
}

实例

<div class="bg-background-light dark:bg-background-dark">
Dark Mode Example
</div>

3、配置变体：variants

variants 选项允许你定义哪些状态（如 hover、focus 等）应该被包含在最终的 CSS 中。

你可以扩展或覆盖默认的变体：

variants: {
  extend: {
    borderColor: ['focus-visible'],
    opacity: ['disabled'],
  }
}

4、使用插件：plugins

plugins 选项允许你添加自定义的工具类。

这些插件可以是 Tailwind CSS 官方提供的，也可以是社区创建的，格式如下：

plugins: [
  require('some-tailwindcss-plugin')
]

使用插件实例：

实例

const plugin = require('tailwindcss/plugin');

module.exports = {
plugins: [
plugin(function ({ addUtilities }) {
addUtilities({
'.text-shadow': {
textShadow: '2px 2px 4px rgba(0,0,0,0.5)',
},
});
}),
],
}

引入社区插件：

实例

module.exports = {
plugins: [
require('@tailwindcss/forms'), // 表单样式插件
require('@tailwindcss/typography'), // 排版插件
],
}