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

Posted

技术标签:

【中文标题】编译的 Tailwind CSS 不包含自定义导入文件【英文标题】:Compiled Tailwind CSS does not include custom imported files 【发布时间】:2020-11-17 03:52:39 【问题描述】:

我在使用文档中描述的 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 声明中列出,因此我们可以继续解决此问题。

那么,我该如何解决这个问题呢?

提前致谢!

*** 震撼!

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

以上是关于编译的 Tailwind CSS 不包含自定义导入文件的主要内容,如果未能解决你的问题,请参考以下文章

Tailwind css 配置文件在 Apostrophe CMS 中以错误的顺序编译

Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量

不符合 Tailwind 自定义颜色

自定义 Tailwind CSS 时引用默认颜色

tailwindcss/vue:生成的 css 文件不包含 <style> 部分的自定义类

无法在 Tailwind 中添加自定义颜色