Tailwind CSS中如何自定义@utility实用CSS工具类？-css教程-PHP中文网

直接写 .my-utility { } 不起作用，因 tailwind 按需生成机制仅扫描 content 路径下模板中出现的类名字符串，硬写 css 不被识别且不支持响应式、dark 等变体。

tailwind css中如何自定义@utility实用css工具类？

必须用 tailwindcss/plugin 包裹，配合 addUtilities 注入，手写 CSS 或裸导出对象一律不生效。

为什么直接写 `.my-utility { }` 不起作用？

Tailwind 的按需生成机制只扫描 content 路径下模板中出现的类名字符串。你在 CSS 文件里硬写 .text-gradient，但 HTML 里没出现这个字符串，它根本不会进最终 CSS；即使进了，也绕过了响应式、hover、dark: 等所有变体支持。

常见错误包括：

在 src/index.css 里直接写 .sr-only { position: absolute; }
在 tailwind.config.js 中 module.exports = { '.my-class': { color: 'red' } }
裸函数导出：module.exports = ({ addUtilities }) => { addUtilities(...) }（缺少 plugin 包裹）

正确写法：用 `plugin` + `addUtilities`

插件必须通过 tailwindcss/plugin 创建，且 addUtilities 只接受扁平样式对象（不能嵌套 &:hover 或媒体查询）。

示例：添加一个渐变文字工具类

const plugin = require('tailwindcss/plugin')
<p>module.exports = plugin(function({ addUtilities, theme }) {
addUtilities({
'.text-gradient': {
background: <code>linear-gradient(90deg, ${theme('colors.blue.500')}, ${theme('colors.purple.500')})</code>,
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
}
})
})
</p>

注意：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

theme() 只能读取 theme.extend 中已声明的路径，比如 extend: { colors: { blue: { 500: '#3b82f6' } } }
类名含斜杠或冒号（如 .aspect-16/9）必须用 e() 转义：[`.aspect-${e('16/9')}`]
该插件必须显式加入 tailwind.config.js 的 plugins 数组，否则静默忽略

如何让自定义工具类支持 `md:`、`dark:` 等变体？

这些前缀不会自动继承，必须手动展开。Tailwind 不会帮你把 .text-gradient 自动变成 .md:text-gradient 或 .dark:text-gradient。

正确做法是显式写出带前缀的键：

addUtilities({
  '.text-gradient': { /* ... */ },
  '@media (min-width: 768px)': {
    '.md\:text-gradient': { /* ... */ }
  },
  '.dark .dark\:text-gradient': {
    background: `linear-gradient(90deg, ${theme('colors.indigo.400')}, ${theme('colors.violet.500')})`,
  }
})

要点：