如何在新專案和現有專案中使用 Prettier 設定 Tailwind CSS 自動類別排序

介紹

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 (
    <>
      <div className="card">
        <button
          className="border-2 border-teal-700 hover:border-white bg-white hover:bg-teal-700 text-slate-800 hover:text-white transition-colors duration-300 custom-btn"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </div>
    </>
  );
};

export default App;

結果：

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

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

  return (
    <>
      <div className="card">
        <button
          className="custom-btn border-2 border-teal-700 bg-white text-slate-800 transition-colors duration-300 hover:border-white hover:bg-teal-700 hover:text-white"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </div>
    </>
  );
};

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 文件。

以上是如何在新專案和現有專案中使用 Prettier 設定 Tailwind CSS 自動類別排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！