主页 / coding / 问题 / 79542050
Accepted
Christian Munk-Nissen
Asked: 2025-03-29 01:21:51 +0800 CST

TailwindCSS v4 不应用包/组件中的样式

  • 772

为什么我的 Tailwind 无法与我的packages/components/src文件中的组件一起工作？

它在我的组件中有效apps/my-app，但是当我从包中导入我的组件时，它不会在我的组件上应用 TailwindCSS。

我有app.css。packages/styles我该怎么办？

tailwind-css

1 个回答

  1. Best Answer

    TailwindCSS v4 具有自动源检测功能。此功能会扫描所有文件并搜索使用的类名以生成编译的 CSS。但是，它会忽略.gitignore文件中列出的路径，这意味着它通常会跳过node_modules目录；这通常是一件好事。

    为了使其检测自定义包（尽管node_modules被忽略）.gitignore，您可以使用@source如下指令：

    ./src/app.css

    /* detects everything except the paths in the .gitignore file */
@import "tailwindcss";

/* if node_modules is ignored in .gitignore, it is possible to perform detection in its subdirectories */
@source "../node_modules/mypackage-first";
@source "../node_modules/mypackage-second/subdirectory/etc";

    值得注意的是，传递给@source指令的路径是相对的，应该根据 CSS 文件的位置来定义。

    如果 TailwindCSS 没有检测到任何内容，则可能是您在导入期间使用 禁用了源检测source(none)。在这种情况下，TailwindCSS 将仅扫描使用指令指定的路径@source。

    ./src/app.css

    /* source(none) disables all detection, so it doesn't detect anything by default */
@import "tailwindcss" source(none);

/* in this case, it only detects the paths specified with @source */
@source "./"; /* relative path for src, since app.css in my example is located in src  */
@source "../node_modules/mypackage-first";
@source "../node_modules/mypackage-second/subdirectory/etc";
    • 1

相关问题