介紹

Tailwind CSS 是一種流行的實用程式優先 CSS 框架，它提供低階實用程式類別來直接在標記中應用樣式，從而縮短開發週期。

另一方面，Prettier 是一種廣泛使用的程式碼格式化程序，它透過解析程式碼並使用自己的規則重新列印來確保程式碼的格式一致。這有助於在整個專案中保持統一的程式碼風格，使程式碼庫更乾淨、更易於閱讀。

使用 Tailwind CSS 時常見的挑戰是管理實用程式類別的順序，尤其是當樣式和 HTML 的複雜度不斷增加時。手動對這些類別進行排序可能很乏味且容易出錯。這就是自動類別排序的用武之地。透過利用 Prettier 等工具以及 prettier-plugin-tailwindcss 等插件，我們可以自動對 Tailwind CSS 類別進行排序，確保順序一致並提高類別的可讀性和可維護性。

本文的目的是引導您完成在新專案和現有專案中使用 Prettier 設定 Tailwind CSS 自動類別排序的流程。無論您是開始一個新項目還是融入正在進行的項目，這份綜合指南都將為您提供逐步說明。

目錄

• 在新專案中設定 Tailwind CSS 和 Prettier
  • 初始化專案並安裝 Tailwind CSS
  • 安裝並配置 Prettier
• 在現有 Tailwind CSS 專案中設定 prettier-plugin-tailwindcss
• 結論

在新專案中設定 Tailwind CSS 和 Prettier

在開始之前，請確保您已安裝以下軟體：

• Node.js
• 套件管理器（我們將在這個專案中使用bun，但如果您願意，您可以使用npm、yarn或pnpm）
• 程式碼編輯器（例如 VS Code）

初始化專案並安裝 Tailwind CSS

首先建立一個新專案。具體步驟可能會有所不同，具體取決於您首選的框架或設定。有關詳細說明，請參閱 Tailwind CSS 安裝框架指南。如果您已完成 Tailwind CSS 安裝步驟，則可以繼續執行在現有 Tailwind CSS 專案中設定 prettier-plugin-tailwindcss 部分。使用 Vite 的方法如下：

bun create vite my-app --template react-ts
cd my-app
bun install

現在讓我們來安裝並設定 Tailwind CSS

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

您應該會看到一個 Tailwind CSS 設定檔：tailwind.config.js，將以下內容複製到其中。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

將以下 Tailwind 指令加入 CSS 檔案的頂端（例如 src/index.css）：

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

安裝和配置 Prettier

bun install -D prettier prettier-plugin-tailwindcss

在專案的根目錄中建立一個prettier 配置文件，並將prettier-plugin-tailwindcss 外掛程式新增至設定檔中，我們使用.prettierrc，您可以在此處查看其他可接受的prettier 設定檔類型

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

現在讓我們測試一下設置，修改 src/App.tsx 檔案並保存。

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

結果：

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

在現有 Tailwind CSS 專案中設定 prettier-plugin-tailwindcss

如果您的專案已經設定了 Prettier，則整合 prettier-plugin-tailwindcss 外掛程式非常簡單。您只需要安裝插件並配置它。如果 Prettier 尚未安裝，您需要將其與插件一起設定。

對於具有現有更漂亮設置的項目，運行：

bun add -D prettier-plugin-tailwindcss

對於沒有現有 Prettier 設定的項目，運行：

bun add -D prettier prettier-plugin-tailwindcss

將此插件新增到您現有的 Prettier 配置中。如果沒有現有的 Prettier 配置，請在專案的根目錄中建立 .prettierrc 檔案。然後加入以下內容：

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

透過使用 Tailwind CSS 類別更改檔案來確保 Prettier 正常運作。儲存檔案並檢查 Tailwind CSS 類別是否自動排序。

結論

將 prettier-plugin-tailwindcss 整合到新的和現有的 Tailwind CSS 專案中，透過確保一致且有組織的類別排序來改善您的開發工作流程。對於新項目，您可以同時設定 Prettier 和外掛程式以簡化初始配置。對於現有項目，只需將外掛程式新增至現有 Prettier 設定中，或如果尚未配置 Prettier，則安裝 Prettier 和外掛程式。

有關其他設定選項，例如對非標準屬性中的類別進行排序，請造訪 prettier-plugin-tailwindcss 文件。