導入

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 (
    
      

         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

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

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 ドキュメントを参照してください。