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

Question

目标是为 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
css纳米:^5.0.10
postcss-cli:^9.0.2
postcss-导入:^14.0.2
尾风css：“^3.0.7

Answer 1

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

您缺少 --postcss 参数。

假设 postcss.config.js 位于项目的根目录中，将其复制到 package.json[=38= 的脚本部分]:

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

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

npm run tw

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

另一个项目，您如何测试未使用的自定义 classes 的删除？

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

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

How to configure minimum development environment for Tailwindcss v3 to utilize @import

postcss

postcss-import

tailwind-css