tailwindcss 官网（六）定制：配置（ `tailwind.config.js `、-p、important、核心插件、`resolveConfig`）、主题 `theme` 配置

tailwindcss 官网（六）定制：配置（ tailwind.config.js、-p、important、核心插件、resolveConfig）、主题 theme 配置

官网：安装 - Tailwind CSS 中文文档

• Tailwind 是一个构建定制用户界面的框架，所以从开始设计时便考虑了定制。
• !important
  • 这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。

1. 配置

配置和定制 Tailwind 安装的指南。

因为 Tailwind 是一个构建定制用户界面的框架，所以从开始设计时便考虑了定制。

默认情况下，Tailwind 将在项目的根目录中查找一个可选的 tailwind.config.js 的文件，您可以在其中定义任何自定义选项。

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
   
  theme: {
   
    colors: {
   
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
   
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
   
      spacing: {
   
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
   
        '4xl': '2rem',
      }
    }
  },
  variants: {
   
    extend: {
   
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}

配置文件的每个部分都是可选的，因此您只需指定要更改的内容即可。任何缺少的部分将会使用 Tailwind 的 默认配置。

创建 tailwind.config.js

使用 Tailwind CLI 功能生成 Tailwind 配置文件，Tailwind CLI 在您安装 tailwindcss npm 软件包时已经附带安装过。

npx tailwindcss init

这将在项目的根目录下创建一个最小文件 tailwind.config.js：

// tailwind.config.js
module.exports = {
   
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
   
    extend: {
   },
  },
  variants: {
   
    extend: {
   },
  },
  plugins: [],
}

使用其它文件名

要使用 tailwind.config.js 之外的文件名，请在命令行中将其做为参数传入：

npx tailwindcss init tailwindcss-config.js

如果使用自定义文件名，则在 PostCSS 配置中将 Tailwind 做为插件引入时，也需要指定它：

// postcss.config.js
module.exports = {
   
  plugins: {
   
    tailwindcss: {
    config: './tailwindcss-config.js' },
  },
}

创建 PostCSS 配置文件 postcss.config.js

如果您想在生成 tailwind.config.js 文件的同时也生成一个基础的 postcss.config.js 文件，请使用 -p 标志。

npx tailwindcss init -p

这将在您的项目中生成一个 postcss.config.js 文件，如下所示：

module.exports = {
   
  plugins: {
   
    tailwindcss: {
   },
    autoprefixer: {
   },
  },
}

生成全部默认配置

对于大多数用户，我们建议您尽量减少配置文件，只指定您想自定义的内容。

如果您希望构建一个完整的配置文件，其中包括 Tailwind的 所有默认配置，请使用以下 --full 选项：

npx tailwindcss init --full

您将得到一个与 Tailwind 内部使用的 默认配置文件 一致的文件。

主题 theme

在 theme 部分中，您可以定义调色板、字体、类型比例、边框大小、断点等任何与您网站视觉设计有关的东西。

// tailwind.config.js
module.exports = {
   
  theme: {
   
    colors: {
   
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
   
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
   
      spacing: {
   
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
   
        '4xl': '2rem',
      }
    }
  }
}

了解更多关于默认主题及如何对其定制的信息，参考 主题配置指南 。

变体

variants 部分允许您控制为每个核心功能插件生成哪些 变体 。

// tailwind.config.js
module.exports = {
   
  variants: {
   
    fill: [],
    extend: {
   
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}

查看 变体配置指南 了解更多信息。

插件

plugins 部分允许您向 Tailwind 注册插件，这些插件可用于生成额外功能类、组件、基本样式或自定义变体。

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

了解更多关于编写插件的信息，请查看 插件编写指南 。

预设presets

presets 部分允许您指定自己的自定义基本配置，来替代 Tailwind 的默认基本配置。

// tailwind.config.js
module.exports = {
   
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

  // Project-specific customizations
  theme: {
   
    //...
  },
  // ...
}

查看 预设文档 了解更多关于预设的信息。

前缀

prefix 选项允许您为所有 Tailwind 生成的功能类添加一个自定义前缀。当 Tailwind 和一个已有的 CSS 存在命名冲突时，这个功能会非常有用。

例如，您可以通过这样设置来添加 tw- 前缀：

// tailwind.config.js
module.exports = {
   
  prefix: 'tw-',
}

现在，将使用配置的前缀生成每个类。

.tw-text-left {
   
  text-align: left;
}
.tw-text-center {
   
  text-align: center;
}
.tw-text-right {
   
  text-align: right;
}
/* etc. */

请一定要理解，这个前缀是在任何变体前缀之后添加的。这意味着，带有响应式或者状态前缀（如 sm: or hover:）的类仍然会最先出现，自定义前缀要写在冒号后面。

<div class