Tailwind CSS 配置

Tailwind CSS 的强大之处在于其极高的可定制性。几乎所有东西——从调色板到间距单位，再到断点——都可以通过修改 tailwind.config.js 文件来定制。

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

`content`

content 数组告诉 Tailwind 的 JIT 引擎去哪里扫描你的代码，以查找正在使用的类。正确配置这个数组是确保所有需要的 CSS 都被生成的关键。

`theme`

theme 对象是你定义项目设计系统的地方。这里包含了你的调色板、字体、间距、断点等所有视觉相关的配置。

覆盖默认主题 vs. 扩展默认主题

默认情况下，你放在 theme 对象下的任何配置都会覆盖 Tailwind 的默认配置。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // 这将完全替换掉 Tailwind 的默认调色板
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
    },
    // ...
  }
}

如果你只想添加新的值，或者修改一个已有的值，但保留其他的默认值，你应该将你的配置放在 theme.extend 对象下。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // 这会添加一个新的 'tahiti' 颜色，并保留所有默认颜色
        'tahiti': '#3ab7bf',
      },
      spacing: {
        // 这会添加一个新的间距单位 '128'，并保留所有默认间距
        '128': '32rem',
      }
    }
  }
}

最佳实践：始终将你的自定义配置放在 extend 内部，除非你确实希望完全替换掉某个主题选项。

引用其他主题值

如果你想引用 theme 中的其他值，可以提供一个闭包函数。这个函数会接收到一个 theme() 工具函数，你可以用它来访问其他配置值。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cyan': theme => theme('colors.blue.500'),
      },
      height: theme => ({
        'screen/2': '50vh',
        ...theme('spacing') // 引用整个 spacing 对象
      })
    }
  }
}

`plugins`

plugins 数组允许你注册一些可以扩展 Tailwind 功能的 JavaScript 插件。例如，官方提供的 @tailwindcss/typography 插件可以为原生 HTML 标签（如 <h1>, <p>）添加漂亮的排版默认样式。

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

通过深入理解和利用 tailwind.config.js，你可以将 Tailwind CSS 打造成一个完全符合你项目品牌和设计规范的、专属的 CSS 框架。

Tailwind CSS 配置 ​

content ​

theme ​

覆盖默认主题 vs. 扩展默认主题 ​