新規および既存のプロジェクトで、Prettier を使用して Tailwind CSS 自動クラス ソートをセットアップする方法

導入

Tailwind CSS は、一般的なユーティリティ優先の CSS フレームワークであり、マークアップ内で直接スタイルを適用する低レベルのユーティリティ クラスを提供し、開発サイクルの短縮につながります。

一方、

Prettier は広く使用されているコード フォーマッタであり、コードを解析し、独自のルールで再印刷することで、コードが一貫してフォーマットされていることを保証します。これにより、プロジェクト全体で均一なコード スタイルが維持され、コードベースがすっきりして読みやすくなります。

Tailwind CSS を使用する際の一般的な課題の 1 つは、特にスタイルと 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

既存のより適切なセットアップがないプロジェクトの場合は、次を実行します:

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 中国語 Web サイトの他の関連記事を参照してください。