Tailwind CSS v4 環境構築

概要

Tailwind CSS v4 の開発環境を構築する。

環境

• MacOS上のDevcontainer
• Vite + React + TypeScript
• Tailwindの最新バージョン
• Pythonバックエンドとのモノレポ構成（この記事には関係しない予定）

関連リンク

• Tailwind CSS公式
• Viteでのv4インストール手順

インストール

Tailwind CSSのインストール

公式ページのインストール手順に従う

1. Tailwind CSSをインストール

   npmのパッケージ追加

   npm install tailwindcss @tailwindcss/vite
   

2. Viteプラグインの設定
   vite.config.ts を書き換え

   vite.config.ts

   ...
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({)
     plugin[react(), tailwindcss()],
     ...
    })
   

VSCの拡張機能のインストール

公式ページのエディタ設定に従い Tailwind CSS IntelliSense extension をインストール。

Prettierプラグインのインストール

prettier-plugin-tailwindcss をドキュメントの手順に従ってインストール。