如何為 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

最終結果是，即使包裝在所需的 @layer {}中， Tailwindcss也不會刪除我未使用的自定義 styles。

此處的第 5 步（使用 PostCSS）只是說開始構建過程，並沒有提供任何細節。

此處的第 4 步（Tailwind CLI）僅表示啟動 Tailwind CLI 進程。

那么，我錯過了什么？

我需要使用捆綁器嗎？ 如果是這樣，我更喜歡的是 Rollup。

其他詳情：

自動前綴：^10.4.0
cssnano:^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的腳本部分：

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

然后從項目根目錄的命令行運行：

npm run tw

注意：使用上述命令，Tailwind 將不會在 HTML 文件保存后重建 output 文件。 您需要編輯並保存 CSS 源文件之一以啟動重建。 （也許我還有配置問題？）

另一項，您如何測試刪除未使用的自定義類？

The mistake I made was just commenting out the HTML utilizing the custom class and then looking at the CSS output to see if the class was removed. 但是如果 class 出現在標記中的任何位置，即使在注釋行中，Tailwind（如某處記錄的那樣）也不會刪除 class 。 If you're testing your build process, rename the class in the markup to anything, and then Tailwind will drop the custom class from the CSS output.