如何在TailwindCSS CSS-first配置中向插件传递参数？

核心结论 #

目前TailwindCSS v4的@plugin指令不支持直接传递参数，官方文档仅定义了它的加载能力——只能接收包名或本地路径，无法向插件函数传入参数。但可以通过以下两种方案实现你的需求：

方案一：混合JS配置调用（推荐） #

虽然采用CSS-first的方式引入Tailwind，但你仍然可以保留tailwind.config.js来配置插件，直接在配置中调用带参数的插件函数：

1. 在tailwind.config.js中配置插件

import { myPluginName } from './path-to-your-plugin-file';

export default {
  plugins: [
    myPluginName(true) // 这里直接传递布尔参数true/false
  ]
}

2. CSS文件中正常导入Tailwind
   无需再使用@plugin指令，因为插件已经在JS配置中加载完成：

@import "tailwindcss";

方案二：通过Tailwind主题配置传递参数 #

如果希望尽量贴近纯CSS-first的工作流，可以通过@theme指令定义自定义配置项，让插件内部读取该值来判断布尔状态：

1. 修改插件代码，读取主题配置

import plugin from 'tailwindcss/plugin'

export const myPluginName = plugin(
  ({ addUtilities, theme }) => {
    // 读取主题中的自定义配置，默认值为false
    const customEnabled = theme('customPlugin.enabled') === 'true';
    
    if (customEnabled) {
      // 当参数为true时执行你的逻辑
      addUtilities({
        '.custom-utility': {
          color: 'theme(colors.red.500)',
        }
      });
    }
  },
)

2. 在CSS文件中设置配置并加载插件

@import "tailwindcss";

/* 通过@theme定义自定义配置项 */
@theme {
  --tw-customPlugin-enabled: true; /* 设置为true或false */
}

/* 加载插件 */
@plugin "myPluginName";

官方@plugin指令中文说明 #

使用@plugin指令加载传统的基于JavaScript的插件：

@plugin "@tailwindcss/typography";

@plugin指令接受包名或本地路径。

内容的提问来源于stack exchange，提问作者rozsazoltan