Tailwind CSS on GitHub

添加新的工具类

扩展你自己的工具类。

尽管Tailwind提供了一组非常全面的工具类,但你可能会遇到需要添加一些自己的工具类的情况。

这里有一些最佳实践,可以帮助你以最惯用的方式添加自己的工具类。


使用CSS

将自己的工具类添加到Tailwind的最简单方法是将它们添加到CSS中。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

通过使用@layer指令,Tailwind会自动将这些样式移动到与@tailwind utilities相同的地方,来避免一些特殊的状况。

使用@layer指令还会让Tailwind在清理utilities层时考虑这些样式。要了解更多细节,请阅读优化生产环境

响应式设计

如果你想根据你在tailwind.config.js中定义的断点生成你自己的工具类的响应式变体。将你的工具类放在@variants responsive指令里面:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

Tailwind将自动生成每个自定义工具类的前缀版本,你可以使用它们在不同的断点有条件地应用这些样式:

<!-- Use `scroll-snap-type: none` by default, then use `scroll-snap-type: x` on medium screens and up -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

更多细节,查看响应式设计

暗黑模式

如果你想要给你的工具类生成暗黑变体,首先确保你的配置文件tailwind.config.js有把darkMode设置为media或者class

// tailwind.config.js
module.exports = {
  darkMode: 'media'
  // ...
}

接下来,将你的工具类包裹在@variants dark指令里面:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants dark {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind将自动生成每个自定义工具类的前缀版本,你可以使用它们在不同的断点有条件地应用这些样式

<div class="filter-grayscale dark:filter-none"></div>

更多细节,查看暗黑模式.

其他变体

如果你想要给你的工具类生成其他变体,将你的工具类包裹在@variants指令里面,你可以选择任何你需要的变体值:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind将自动生成每个自定义工具类的前缀版本,你可以使用它们在不同的断点有条件地应用这些样式

<div class="filter-grayscale hover:filter-none"></div>

变体的权重与你在@variant指令中列出它们的顺序相同,所以如果你想让一个变量优先于另一个变量,确保你最后列出了一个:

/* Focus will take precedence over hover */
@variants hover, focus {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

/* Hover will take precedence over focus */
@variants focus, hover {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

更多细节,查看hover&focus&其他变体.


使用插件

除了在CSS文件中直接添加新的工具类,你还可以通过编写自己的插件来添加工具类:

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

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

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

如果你想要将自定义工具类作为库发布,或者让它们更容易在多个项目之间共享,那么这是一个很好的选择。

更多细节,查看添加插件.