1

目标是为 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

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

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

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

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

此处的第 5 步（使用 PostCSS）只是说开始构建过程，并没有提供任何细节。

此处的第 4 步（Tailwind CLI）仅表示启动 Tailwind CLI 进程。

那么，我错过了什么？

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

其他详情：

自动前缀：^10.4.0
cssnano：^5.0.10
postcss-cli：^9.0.2
postcss-import：^14.0.2 tailwindcss
：“^3.0.7

4

1 回答 1

0

你的直觉是正确的。您不需要运行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 输出中删除自定义类。

于 2021-12-31T16:33:55.953 回答