Tailwind CSS - 插件

使用插件扩展 Tailwind CSS

Tailwind CSS 插件是 JavaScript 函数，它们允许你扩展 Tailwind 的功能。它们是创建可复用组件、添加新的工具类变体（utility variants）或将复杂的样式模式集成到项目中的关键，同时保持 tailwind.config.js 文件的整洁和设计系统（design system）的可扩展性。

为什么要使用插件？

可复用性： 将一组自定义样式和逻辑打包，以便在多个项目之间轻松共享。
抽象性： 将复杂的 CSS-in-JS 逻辑封装成简单的工具类或组件类。
可配置性： 使用 plugin.withOptions 创建可配置的插件，允许用户自定义类名、主题值（theme values）等。
社区支持： 利用丰富的第三方插件生态系统，或贡献你自己的插件。

使用官方插件

Tailwind CSS 团队维护着多个用于常见功能的官方插件。要使用它们，你首先需要通过 npm 安装它们，然后将它们添加到 tailwind.config.js 文件中的 plugins 数组里。

# 安装官方的表单和排版插件
npm install -D @tailwindcss/forms @tailwindcss/typography

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

编写你自己的插件

创建插件需要调用 plugin() 函数，该函数会接收一个包含辅助函数的对象，用于连接到 Tailwind 的引擎。你可以使用这些辅助函数来添加新的基础样式（base styles）、工具类（utilities）、组件（components）或变体（variants）。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme, e }) {
      // 你的插件逻辑在这里
      const customUtilities = {
        '.rotate-y-180': {
          transform: 'rotateY(180deg)',
        },
      }
      addUtilities(customUtilities)
    }),
  ],
}

使用 `addUtilities` 添加工具类

使用 addUtilities 注册新的静态 CSS 工具类。这些工具类可以自动与 hover: 和 focus: 等变体结合使用。

使用 `matchUtilities` 添加动态工具类

使用 matchUtilities 创建接受来自主题（theme）或任意值的工具类。例如，创建一个使用 theme('colors') 的 text-shadow 工具类。

// 插件代码
matchUtilities(
  {
    'text-shadow': (value) => ({
      textShadow: `1px 1px 2px ${value}`,
    }),
  },
  { values: theme('colors') }
)

// HTML 用法
// <p class="text-shadow-red-500">...</p>
// <p class="text-shadow-[#ABCDEF]">...</p>

使用 `addComponents` 添加组件

使用 addComponents 注册更高级别的组件类，例如按钮或卡片。它们非常适合抽象化常见的工具类模式。

// 插件代码
const buttonStyles = {
  '.btn': {
    padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
    borderRadius: theme('borderRadius.md'),
    fontWeight: theme('fontWeight.semibold'),
    transition: 'all .2s ease',
  },
  '.btn-primary': {
    backgroundColor: theme('colors.blue.500'),
    color: theme('colors.white'),
    '&:hover': {
      backgroundColor: theme('colors.blue.600'),
    }
  }
}
addComponents(buttonStyles)

// HTML 用法
// <button class="btn btn-primary">Click Me</button>

使用 `addVariant` 添加自定义变体

使用 addVariant 注册你自己的自定义修饰符，例如用于 hover 和 focus 的 hocus，或者针对特定数据属性（data attribute）的变体。

// 插件代码
addVariant('hocus', ['&:hover', '&:focus'])
addVariant('group-open', ':merge(.group).open &')

// HTML 用法
// <button class="bg-blue-500 hocus:bg-blue-600">...</button>
// <div class="group">
//   <span class="group-open:block">...</span>
// </div>

高级概念：可配置插件

plugin.withOptions API 允许你创建用户可以配置的插件。这是构建可分发插件的专业方式。

const plugin = require('tailwindcss/plugin')

module.exports = plugin.withOptions(function (options = {}) {
  // 插件主函数，可以访问用户的配置选项
  return function ({ addComponents }) {
    const buttonClass = options.buttonClass ?? '.btn-custom'
    addComponents({
      [buttonClass]: {
        backgroundColor: 'purple',
        color: 'white',
        // ...
      }
    })
  }
})

// tailwind.config.js
module.exports = {
  plugins: [
    require('./plugins/custom-button.js')({ buttonClass: '.my-super-button' })
  ],
}

Tailwind CSS - 插件

使用插件扩展 Tailwind CSS

为什么要使用插件？

使用官方插件

热门官方插件

编写你自己的插件

使用 addUtilities 添加工具类

使用 matchUtilities 添加动态工具类

使用 addComponents 添加组件

使用 addVariant 添加自定义变体

高级概念：可配置插件

使用 `addUtilities` 添加工具类

使用 `matchUtilities` 添加动态工具类

使用 `addComponents` 添加组件

使用 `addVariant` 添加自定义变体