编译的 Tailwind CSS 不包含自定义导入文件

Question

我在使用 npx 编译 TailwindCSS 时遇到一些问题，如文档中所述。Webpack 正在完成他的工作！开发服务器和构建发行版都可以正确使用自定义类！问题是当我编译 tailwindcss throught 时npx tailwindcss build tail.css -o tailwind.full.css。自定义导入不包含在结果 css 文件中。所以，自动完成功能没有完成我的自定义 css 键......一切正常，除了npm tailwindcss build谁不编译我的 @import[ed] 自定义 css 文件。我怎样才能得到这个？

\n

这是在 npx tailwind build 命令中通知的我的 tail.css 文件：

\n

@import "./colors.css";\n\n@import "tailwindcss/base";\n\n@import "tailwindcss/components";\n\n@import "tailwindcss/utilities";\n\n@import "./custom.css";\n

\n

如果我更改错误的文件名（如 ./customnnnn.css），则不会报告错误：

\n

我的控制台输出：

\n

npx tailwindcss build src/assets/css/tail.css -o src/assets/css/tailwind/tailwind.full.css\n\n   tailwindcss 1.5.2\n\n   \xef\xbf\xbd Building... src/assets/css/tail.css\n\n   \xe2\x9c\x85 Finished in 3.53 s\n   \xef\xbf\xbd Size: 1.9MB\n   \xef\xbf\xbd Saved to src/assets/css/tailwind/tailwind.full.css\n

\n

但是如果我更改诸如“tailwindcss/utilitiesssssss”之类的内容，结果文件会更小，没有实用程序内容。所以，有人说我的自定义文件的路径映射在实用程序中有些错误npx tailwind build，但我尝试了所有方法都没有成功，并且当使用正确的文件名（如文档说明）时，开发和生产版本都可以正常工作。因此，错误仅出现在npx tailwind build！当未找到 @import 声明中列出的某些文件时，它至少可以显示一些警告，因此我们可以继续解决此行为。

\n

那么，我该如何解决这种行为呢？

\n

提前致谢！

\n

StackOverflow 太棒了！

\n

Answer 1

@import需要提供绝对目录。它不会编译npx tailwindcss并忽略它，因为它是基本的 CSS 规则。所以每次使用@import 'some file'tailwindcss时，都使用绝对路径。@import ../custom.css在你的情况下。所以浏览器可以加载它。另请注意@import，不建议这样做，因为它会减慢网页渲染速度。

现代顺风用于@tailwind导入基础、实用程序等。因此请始终避免@import。