TailwindCSS v4仅导入utilities时prefix()失效，如何实现带前缀无全局样式？

要在TailwindCSS v4中仅使用带tw:前缀的工具类，同时避免全局样式（preflight、base层），可以通过以下方式实现：

方法一：配置文件控制（推荐） #

1. 在项目根目录创建或修改tailwind.config.js，设置前缀并禁用不需要的核心插件：

export default {
  // 给所有工具类添加`tw:`前缀
  prefix: 'tw:',
  corePlugins: {
    // 禁用全局样式归一化的preflight
    preflight: false,
    // 禁用base层的默认样式
    base: false,
    // 若不需要components层，也可添加：components: false
  },
}

2. 在CSS文件中导入完整的TailwindCSS：

@import "tailwindcss";

此时Tailwind会根据配置仅生成带tw:前缀的工具类，不会输出preflight和base层的全局样式，完全适配嵌入第三方网站的Widget场景。

方法二：直接控制CSS导入层 #

如果希望仅导入utilities层并生效前缀，可尝试将utilities导入到自定义层中：

@layer utilities {
  @import "tailwindcss/utilities" prefix(tw);
}

注：该方式在部分Tailwind v4版本中可能存在兼容性问题，优先推荐方法一。

验证效果 #

使用带tw:前缀的工具类即可正常生效：

<div class="tw:flex tw:items-center tw:justify-between">
  <!-- 内容 -->
</div>

内容的提问来源于stack exchange，提问作者Phong Vũ