Tailwind CLI 不导入外部文件

Question

我正在使用 Tailwind CSS 3.0 并根据使用预处理器对其进行配置文档对其进行配置。

\n

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

\n

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

\n

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

\n

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

\n

目录结构如下所示：

\n

Styles/v2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-base-styles.css\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-components.css\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\nwwwroot/dev\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 v2\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\n

\n

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

\n

Styles/v2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-base-styles.css\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-components.css\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\nwwwroot/dev\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 v2\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\n

\n

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

\n

Answer 1

事实证明我在使用npx tailwindcss. 正如Tailwind CSS 入门指南中所述，Tailwind CLI 和 PostCSS 是使用 Tailwind 的两种不同方式。

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