使用@tailwind utilities时如何禁用自动源检测？

要在嵌套CSS场景下使用@tailwind utilities;时禁用自动源检测（即强制执行source(none)），可以通过以下两种实用方案实现：

方案一：PostCSS替换插件处理 #

借助postcss-replace插件，在PostCSS编译流程中提前将嵌套内的@tailwind utilities;替换为带source(none)的导入语句。需确保替换插件在Tailwind插件之前执行，配置示例如下：

module.exports = {
  plugins: [
    require('postcss-replace')({
      pattern: /@tailwind utilities;/g,
      data: '@import "tailwindcss/utilities.css" layer(utilities) source(none);'
    }),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

方案二：自定义Tailwind插件生成工具类 #

跳过原生@tailwind utilities;指令，通过自定义插件生成工具类并直接指定source(none)。在tailwind.config.js中添加如下配置：

module.exports = {
  // 你的Tailwind基础配置
  plugins: [
    function({ addUtilities }) {
      // 复用Tailwind内置工具类配置
      const builtInUtilities = require('tailwindcss/lib/utilities')
      addUtilities(builtInUtilities, {
        layer: 'utilities',
        source: false // 等价于source(none)
      })
    }
  ]
}

注意：Tailwind官方并不推荐在嵌套CSS中使用@tailwind指令，若项目架构允许，尽量将@tailwind指令放在CSS文件顶层，可避免额外的编译配置成本。

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