如何为 Tailwindcss v3 配置最小开发环境以利用 @import答案

【问题标题】：How to configure minimum development environment for Tailwindcss v3 to utilize @import如何为 Tailwindcss v3 配置最小开发环境以利用 @import
【发布时间】：2022-01-01 00:33:55
【问题描述】：

目标是为 Tailwindcss v3 配置支持 @import 和删除未使用的自定义 CSS 类的开发环境。

我没有使用打包工具。该项目仅依赖于 HTML、CSS 和 JS，即没有框架。如果它很重要，我会使用 VS Code。

这是我尝试过的。

项目配置：

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './src/**/*.{html,js}',
    ],
    darkMode: 'media',
    theme: {
        extend: {
            fontFamily: {
                primary: '"Inter", sans-serif',
                mono: ['"DM Mono"', ...defaultTheme.fontFamily.mono]
            }
},
    },
    variants: {
        extend: {}
    },
    plugins: [
        // ...
    ]
};

// postcss.config.js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano')
    ]

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

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

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

这是我的推荐台词：

 $ npx tailwindcss -i ./src/css/styles.css -o ./css/styles.css --watch

仅运行上述命令，安装程序不会内联自定义*.css 文件。

为了实现内联，我还得在下面执行，表面上看起来好像没有必要。

 $ npx postcss-cli './src/css/styles.css' -o './css/styles.css' -w

最终结果是，Tailwindcss 不会删除我未使用的自定义样式，即使包装在 required @layer {} 中也是如此。

Step 5 here (Using PostCSS) 只是说开始你的构建过程，并没有提供任何细节。

Step 4 here (Tailwind CLI) 只表示启动 Tailwind CLI 进程。

那么，我错过了什么？

我需要使用捆绑器吗？如果是这样，我更喜欢 Rollup。

其他细节：

自动前缀：^10.4.0
cssnano:^5.0.10
postcss-cli:^9.0.2
postcss 导入：^14.0.2
tailwindcss: "^3.0.7

【问题讨论】：

标签： tailwind-css postcss postcss-import

【解决方案1】：

你的直觉是正确的。您不需要运行post-cli。 PostCSS 将在您更新 Tailwind 命令后执行。

您缺少--postcss 参数。

假设 postcss.config.js 位于项目的根目录中，请将其复制到 package.json 的脚本部分：

"tw": "tailwindcss -i ./src/css/styles.css -o ./css/styles.css --postcss postcss.config.js --watch"

然后从项目根目录的命令行运行：

npm run tw

注意： 使用上述命令，Tailwind 将不会在 HTML 文件保存后重建输出文件。您需要编辑并保存其中一个 CSS 源文件以启动重建。（也许我还有配置问题？）

另外一项，您如何测试删除未使用的自定义类？

我犯的错误只是使用自定义类注释掉 HTML，然后查看 CSS 输出以查看该类是否被删除。 但如果类出现在标记中的任何位置，即使是在注释行中，Tailwind（如某处所述）也不会删除该类。如果您正在测试构建过程，请将标记中的类重命名为任何名称，然后 Tailwind 将从 CSS 输出中删除自定义类。

【讨论】：