我在一个将嵌入到其他网站的小部件中使用TailwindCSS v4。由于这个原因，我想避免全局样式冲突，尤其是CSS归一化（normalize.css）。

因此，不去导入完整的TailwindCSS（包含主题和前置样式preflight），我只导入工具类：

@import "tailwindcss/utilities" prefix(tw);

然而，似乎 prefix() 在这种情况下不起作用。在这种情况下，它只识别没有前缀的工具类。

<!-- does not work, but I expected it to work -->
<div class="tw:flex tw:items-center"></div>

<!-- works, even though it shouldn't -->
<div class="flex items-center"></div>

如果我使用原始导入，其中包含preflight和默认命名空间值，前缀就能正确工作，TailwindCSS只为带有前缀的类生成工具类（例如，它为 tw:flex 生成一个，但 flex 不会）。

@import "tailwindcss" prefix(tw);

我不需要默认的TailwindCSS样式（preflight）和层（base、theme等），但我想使用一个前缀（tw:）。我该如何实现？

解决方案

通过跳过preflight，默认就不会应用任何默认样式；颜色和其他数值可以被覆盖。无论如何，TailwindCSS仅将必要的代码包含在编译后的生产CSS中，因此这个导入并不成问题。

• TailwindCSS Playground

@import "tailwindcss/theme.css" prefix(tw);
@import "tailwindcss/utilities.css";

如果你不需要默认值，你可以简单地全部移除。

• TailwindCSS Playground

@import "tailwindcss/theme.css" prefix(tw);
@import "tailwindcss/utilities.css";

/* Disable all namespaces added by theme.css */
@theme {
  --*: initial;
}

/* After that, you can set the configuration with your own values */
@theme {
  --spacing: 4px;
  --color-brand: #555;
}