使用 Tailwind 插件添加自定义样式

Leo

March 25, 2023

Tailwind CSS 插件机制
自定义插件实现方式
详细说明

在查看 Tailwind 的文档时，发现他的很多范例都是下面这样的样式，我对其中条纹背景很感兴趣，发现他们有各种颜色的条纹背景，于是想看看他是怎么实现的。

通过学习，发现这些条纹背景是由 bg-stripes-blue 或者 bg-stripes-ovlite 这样的属性实现的，但是tailwind本身并没有这样的属性。那么这个属性是怎么来的呢？原来是使用了自定义样式。

当我们使用 Tailwind CSS 进行样式开发时，我们经常会遇到一些特殊的样式需求，这时候就需要使用自定义样式来实现。而 Tailwind CSS 提供了插件机制，可以帮助我们更加方便地定义自定义样式。下面我们就来介绍一下如何使用 Tailwind CSS 插件机制来实现自定义样式。

Tailwind CSS 插件机制

Tailwind CSS 的插件机制是基于 PostCSS 的插件机制实现的。在使用 Tailwind CSS 时，我们可以通过 require 函数来引入 Tailwind CSS 的插件，然后将其添加到 Tailwind CSS 的配置文件中。比如我们可以通过引入 @tailwindcss/line-clamp 插件来实现文本溢出省略号展示的效果，如下所示：

tailwind.config.js

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
    },
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
]

自定义插件实现方式

除了使用 Tailwind CSS 自带的插件，我们还可以自定义插件来实现自己的样式需求。在 Tailwind CSS 中，我们可以通过 function 函数来定义插件，然后将其添加到 Tailwind CSS 的配置文件中。

例如，我们可以定义一个插件函数，来实现在背景上添加斜线条纹的效果。具体实现方式如下：

tailwind.config.js

plugins: [
    require('@tailwindcss/line-clamp'),
    function ({ addUtilities, theme }) {
      let backgroundSize = '7.07px 7.07px'
      let backgroundImage = (color) =>
        `linear-gradient(135deg, ${color} 10%, transparent 10%, transparent 50%, ${color} 50%, ${color} 60%, transparent 60%, transparent 100%)`
      let colors = Object.entries(theme('backgroundColor')).filter(
        ([, value]) => typeof value === 'object' && value[400] && value[500]
      )
      addUtilities(
        Object.fromEntries(
          colors.map(([name, colors]) => {
            let backgroundColor = colors[400] + '1a' // 10% opacity
            let stripeColor = colors[500] + '80' // 50% opacity
            return [
              `.bg-stripes-${name}`,
              {
                backgroundColor,
                backgroundImage: backgroundImage(stripeColor),
                backgroundSize,
              },
            ]
          })
        )
      )
      addUtilities({
        '.bg-stripes-white': {
          backgroundImage: backgroundImage('rgba(255 255 255 / 0.75)'),
          backgroundSize,
        },
      })
    },
  ],

详细说明

在上面的代码中，我们以函数的形式定义了一个插件。function ({ addUtilities, theme })是一个函数，函数中，addUtilities 函数用于将自定义的实用类添加到 Tailwind CSS 的样式中，theme 对象包含了 Tailwind CSS 的主题配置，我们可以在自定义样式中使用这些主题配置来生成样式。

下面，我们来看一下具体的用法。addUtilities 函数的第一个参数是一个对象，其中 key 是类名，value 是样式对象。

例如，我们可以使用以下代码来添加一个名为 .text-underline 的实用类，用于给文字添加下划线：

function ({ addUtilities }) {
  addUtilities({
    '.text-underline': {
      textDecoration: 'underline',
    },
  })
}

继续来看我们的代码实现：

在我们的function ({ addUtilities, theme })函数中，我们首先定义了两个变量，分别是背景大小（backgroundSize）和创建背景图像的函数（backgroundImage）。

其中，backgroundSize的值是一个固定的字符串 '7.07px 7.07px'，表示条纹的大小为7.07px × 7.07px。而backgroundImage则是一个函数，接收一个颜色参数作为输入，并返回一个用于创建条纹背景的CSS属性值。它使用了linear-gradient函数创建一个45度角的线性渐变背景，其中包括了两种颜色，用于创建交替的条纹效果。

接下来，我们通过调用theme函数获取Tailwind主题中的背景颜色（backgroundColor），然后使用filter方法过滤出其中所有值为对象、且包含400和500两个属性的颜色，保存在一个数组colors中。

随后，我们调用addUtilities函数，将包含条纹背景的utility类添加到Tailwind中。具体地，我们使用map方法遍历colors数组，并将其中的每个颜色转换为一个utility类。对于每个颜色，我们使用字符串拼接方式生成其背景颜色（将400属性的值加上10%的透明度），以及条纹的颜色（将500属性的值加上50%的透明度）。接着，我们将这些属性值包装成一个对象，并使用fromEntries方法将utility类名和样式规则组合成一个键值对对象，传递给addUtilities函数。

最后，我们使用addUtilities函数再添加一个特定的utility类 .bg-stripes-white，它的背景颜色是白色（使用rgba(255 255 255 / 0.75)表示），用于创建白色背景的条纹样式。

这样我们就可以在组件中使用这些样式了，bg-stripes-pink bg-stripes-violet :

example.js

function MyExample() {
  return (
    <div className="mt-2 grid grid-cols-1 gap-4 text-white text-sm font-bold font-mono leading-6 rounded-lg">
      <div className="bg-stripes-pink mt-2 flex gap-8 rounded-lg">
        <div className="p-4 flex-none w-14 h-14 rounded-lg flex items-center justify-center bg-pink-300 dark:bg-pink-800 dark:text-pink-400">
          01
        </div>
        <div className="p-4 flex-1 w-64 rounded-lg flex items-center justify-center bg-pink-500 shadow-lg">
          02
        </div>
        <div className="p-4 flex-1 w-32 rounded-lg flex items-center justify-center bg-pink-500 shadow-lg">
      <div className="bg-stripes-violet mt-2 flex gap-8  rounded-lg">

本文介绍了 Tailwind CSS 的插件机制，并演示了如何通过自定义插件来实现自定义样式。特别地，我们使用一个函数来创建条纹背景的样式，并将其添加到 Tailwind 中。通过本文，你可以了解如何使用 Tailwind 的插件机制来实现自定义样式，以及如何使用自定义插件来添加自己想要的样式。