內嵌 tailwind CSS 和多檔案 tailwind CSS 有何不同？

Question

我們是否必須將其內聯編寫為：

• 索引.css 文件，其中包含所有 Tailwind 啟動器

@tailwind base;
@tailwind components;
@tailwind utilities;

或在單獨的檔案中，例如：

• 索引.css
  • 檔案1.css
  • 檔2.css

Answer 1

您的 index.css 檔案可以包含實用程式類別。 您使用 tailwind 指令 tailwind -i index.css -o output.css 來建立並產生 css 檔案。

在您的 html 檔案中：您需要在 class 屬性中使用 tailwind 內聯：

    you rest of body

您需要的最後一個是 tailwind 設定文件，當您在工作目錄中執行 tailwind init 時會自動建立該檔案。這個設定檔看起來像這樣：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

此檔案的目的是檢查是否有任何 html 檔案正在使用 tailwind 類，如果是，則在執行建置命令時基於渲染 output.css 。