tailwindcss 官网（八）定制：插件、预设（presets、合并配置）

tailwindcss 官网（八）定制：插件、预设（presets、合并配置）

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

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

1. 插件

使用可复用的第三方插件扩展 Tailwind。

概述

插件让您注册新的样式，让 Tailwind 使用 JavaScript 代替 CSS 注入用户的样式表。

要开始您的第一个插件，先从 tailwindcss/plugin 导入 Tailwind 的 plugin 函数。然后在您的 plugins 数组中，调用这个函数，用一个匿名函数作为其第一个参数。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addUtilities, addComponents, e, prefix, config }) {
   
      // Add your custom styles here
    }),
  ]
}

插件函数接收一个单一的对象参数，可以 destructured 成几个帮助函数。

• addUtilities(), for registering new utility styles
• addComponents(), for registering new component styles
• addBase(), for registering new base styles
• addVariant(), for registering custom variants
• e(), for escaping strings meant to be used in class names
• prefix(), for manually applying the user’s configured prefix to parts of a selector
• theme(), for looking up values in the user’s theme configuration
• variants(), for looking up values in the user’s variants configuration
• config(), for looking up values in the user’s Tailwind configuration
• postcss, for doing low-level manipulation with PostCSS directly

---

添加功能类

addUtilities 函数允许您在 Tailwind 的 utilities 层注册新的样式。

插件功能类的输出顺序是按照其注册的顺序，在内置的功能类之后，所以如果一个插件的作用目标是任何一个与内置功能类相同的属性，插件功能类将优先。

要从插件中添加新的功能类，调用 addUtilities，使用 CSS-in-JS 语法 传递您的样式。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addUtilities }) {
   
      const newUtilities = {
   
        '.skew-10deg': {
   
          transform: 'skewY(-10deg)',
        },
        '.skew-15deg': {
   
          transform: 'skewY(-15deg)',
        },
      }

      addUtilities(newUtilities)
    })
  ]
}

前缀 和 important 参考

默认情况下，插件功能类会自动遵守用户的 prefix 和 important 偏好。

也就是说，如果给出这样的 Tailwind 配置：

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

…上面的示例插件会生成以下CSS:

.tw-skew-10deg {
   
  transform: skewY(-10deg) !important;
}
.tw-skew-15deg {
   
  transform: skewY(-15deg) !important;
}

如果有必要，您可以通过向 addUtilities 传递一个选项对象作为第二个参数来选择不使用这种行为。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addUtilities }) {
   
      const newUtilities = {
   
        // ...
      }

      addUtilities(newUtilities, {
   
        respectPrefix: false,
        respectImportant: false,
      })
    })
  ]
}

变体

要生成 responsive、hover、focus、active 或样式的其它变体，请使用 variants 选项指定您想生成的变体。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addUtilities }) {
   
      const newUtilities = {
   
        // ...
      }

      addUtilities(newUtilities, {
   
        variants: ['responsive', 'hover'],
      })
    })
  ]
}

如果您只需要指定变体，而不需要选择不使用默认的前缀或 important 选项，您也可以直接将变体数组作为第二个参数传递。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addUtilities }) {
   
      const newUtilities = {
   
        // ...
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

如果您希望用户在他们的 tailwind.config.js 文件中的 variants 部分提供自己的变体，您可以使用 variants() 函数来获取他们配置的变体。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  variants: {
   
    customPlugin: ['responsive', 'hover'],
  },
  plugins: [
    plugin(function({
     addUtilities, variants }) {
   
      const newUtilities = {
   
        // ...
      }

      addUtilities(newUtilities, variants('customPlugin'))
    })
  ]
}

---

增加组件

addComponents 函数允许您在 Tailwind 的 components 层注册新的样式。

用它来添加更个性化、更复杂的类，比如按钮、表单控件、警告等；就是您在其他框架中经常看到的您可能需要使用功能类覆盖的那种预建组件。

要从插件中添加新的组件样式，调用 addComponents ，使用 CSS-in-JS 语法 传递您的样式。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addComponents }) {
   
      const buttons = {
   
        '.btn': {
   
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
   
          backgroundColor: '#3490dc',
          color: '#fff',
          '&:hover': {
   
            backgroundColor: '#2779bd'
          },
        },
        '.btn-red': {
   
          backgroundColor: '#e3342f',
          color: '#fff',
          '&:hover': {
   
            backgroundColor: '#cc1f1a'
          },
        },
      }

      addComponents(buttons)
    })
  ]
}

前缀 和 important 参考

默认情况下，组件类自动遵守用户的 prefix 偏好，但不受用户的 important 偏好的影响。

这意味着如果有以下 Tailwind 配置：

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

…上面的示例插件将生成以下 CSS:

.tw-btn {
   
  padding: .5rem 1rem;
  border-radius: .25rem;
  font-weight: 600;
}
.tw-btn-blue {
   
  background-color: #3490dc;
  color: #fff;
}
.tw-btn-blue:hover {
   
  background-color: #2779bd;
}
.tw-btn-blue {
   
  background-color: #e3342f;
  color: #fff;
}
.tw-btn-blue:hover {
   
  background-color: #cc1f1a;
}

虽然很少有一个很好的理由让组件声明 important，但如果您真的需要这样做，您可以手动添加 !important 。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
   
  plugins: [
    plugin(function({
     addComponents }) {