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

Question

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

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

@import "./colors.css";

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@import "./custom.css";

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

我的控制台输出：

npx tailwindcss build src/assets/css/tail.css -o src/assets/css/tailwind/tailwind.full.css

   tailwindcss 1.5.2

   � Building... src/assets/css/tail.css

   ✅ Finished in 3.53 s
   � Size: 1.9MB
   � Saved to src/assets/css/tailwind/tailwind.full.css

但如果我更改类似“tailwindcss/utilitiesssssss 结果文件更小，没有实用程序内容。所以，有人说我的自定义文件的路径映射在 npx tailwind build 实用程序中有些错误，但是我尝试了所有方法都没有成功，并且当使用正确的文件名时，dev 和 prod 构建都可以正常工作，比如文档说明。所以，错误只出现在 npx tailwind build 实用程序上！它至少可以当未找到 @import 声明中列出的某些文件时显示一些警告，因此我们可以继续解决此问题。

那么，我该如何解决这个问题？

提前致谢！

Whosebug 棒棒哒！

Answer 1

@import 要求提供绝对目录。它不会通过 npx tailwindcss 编译并忽略它，因为它是基本的 css 规则。所以每次使用@import 'some file'和tailwindcss时，都使用绝对路径。 @import ../custom.css 你的情况。所以浏览器可以加载它。另请注意，不推荐使用 @import，因为它会降低网页渲染速度。

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

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

Compiled Tailwind CSS does not include custom imported files

vue.js

tailwind-css