主页 / coding / 问题 / 79568691
Accepted
user435421
Asked: 2025-04-11 19:08:56 +0800 CST

TailwindCSS v4 使用前缀时不会生成某些样式

  • 772

我使用前缀来区分我的样式和第三方类。不使用前缀时，下面的代码可以正常工作：

fixed h-[5px] bg-green top-0 left-0 z-1000

当使用前缀顶部和左侧样式时，tailwind css 文件中根本不会生成，而其他样式则正常。

tw:fixed tw:h-[5px] tw:bg-green tw:top-0 tw:left-0 tw:z-1000

更新： 我正在使用@tailwind，tailwind.config因为这是摆脱所有不必要的 Tailwind 样式的唯一方法。有一个第三方元素使用了 class outline（以及一些 Tailwind 的基本类名），Tailwind 认为这是它的样式，所以 Tailwindoutline在其 CSS 文件中生成了样式，这弄乱了界面。

我尝试过使用@import "tailwindcss" prefix(tw);和其他组合，但这样所有垃圾样式都会出现在生成的 css 中，这会让事情变得混乱。

index.css内容：

@config "../../tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ... */

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  mode: "jit",
  prefix: "tw",
  content: ["./src/**/*.{js,jsx,ts,tsx,css}"],
  theme: {
    colors: {
      'green': '#4287f5'
    }
  }
}
tailwind-css

1 个回答

  1. Best Answer

    进口

    从 TailwindCSS v4 开始，该@tailwind指令已被移除。因此，这些声明都不再需要。您只需要在 CSS 文件顶部添加一个 import 即可：

    @import "tailwindcss";

@config "../../tailwind.config.js";

    前缀

    如果要使用前缀，则需要在文件顶部再次包含导入，如下所示：

    @import "tailwindcss" prefix(tw);

@config "../../tailwind.config.js";

    在我的其他观察中，我注意到mode: "jit"配置文件中的设置自 TailwindCSS v3 以来已被弃用，因为从那时起 JIT 模式一直是默认模式。

    从 v4 开始，如果您使用的是旧版 JavaScript 配置，prefix: "tw"则不再需要在配置文件中定义；如上所述，现在应该在导入期间指定。

    此外，从 TailwindCSS v4 开始，您不需要定义内容选项；v4 会自动发现您的源文件（不包括中列出的路径.gitignore）。

    注意：请确保 TailwindCSS 在编译 CSS 时不会考虑 中列出的文件.gitignore。可以使用@source指令覆盖 gitignore （例如，如果您想排除node_modules但需要来自一两个包中的某些类名）。更多详情请参阅：TailwindCSS v4 不应用 packages/components 中的样式。

    因此，如果您仍想使用tailwind.config.js，则只需保留当前配置即可：

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      'green': '#4287f5'
    }
  }
}

    如果您不想覆盖所有原始 TailwindCSS 颜色（例如bg-red-500，等）而只想用自己的颜色扩展它们，请使用extend如下属性：

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        'green': '#4287f5'
      }
    }
  }
}

    CSS-first 配置（从 v4 开始推荐）

    从 v4 开始，你实际上不再需要 tailwind.config.js 文件了。所以你可以省略它，改用新的 CSS-first 配置。根据你当前的配置文件，它看起来应该像这样：

    @import "tailwindcss" prefix(tw);

@theme {
  --color-green: #4287f5; /* extend default colors with new green, what can use as e.g. tw:bg-green */
}

    注意：在这种情况下，不再需要了tailwind.config.js！

    当然，如果你根本不需要前缀，那么可以这样使用：

    @import "tailwindcss";

@theme {
  --color-green: #4287f5; /* extend default colors with new green, what can use as e.g. bg-green */
}

    与 v4 相比的更多重大变化

    自 v4 以来，已经引入了几项重大变化；值得对它们进行全部回顾。

    • 0

相关问题