Tailwind CLI 不导入外部文件

Question

我正在使用 Tailwind CSS 3.0 并根据 Using with Preprocessors 文档对其进行了配置。

我的 main.css 文件如下所示：

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";

我的 postcss.config.js 看起来像这样：

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {}
  }
}

目录结构如下所示：

Styles/v2
├── custom-base-styles.css
├── custom-components.css
└── main.css
wwwroot/dev
└── v2
    └── main.css

然后我执行以下命令来构建我的 main.css 文件：

npx tailwindcss -i ./Styles/v2/main.css -o ./wwwroot/dev/v2/main.css --watch

构建已执行并生成了我的 wwwroot/dev/v2/main.css 文件，但包含在我的自定义样式中添加的 none 附加更改。还; --watch 参数正在侦听对 main.css 输入文件的更改，而不是对 @import-ed 文件的更改。

Answer 1

原来我在使用npx tailwindcss时并没有直接使用PostCSS。正如 Tailwind CSS Getting Started 指南中所述，Tailwind CLI 和 PostCSS 是使用 Tailwind 的两种不同方式。

所以在上面的问题中，答案是使用 PostCSS CLI 并调用构建使用：postcss ./Styles/v2/main.css -o style.css --watch.

Tailwind CLI 不导入外部文件

Tailwind CLI not importing external files

tailwind-css