【Tailwind CSS】Vite×React×TypeScriptにおける環境構築方法

Tailwind CSSとは？

Tailwind CSSは、HTML内で直接クラスを使用してスタイルを適用するCSSフレームワークです。

• tailwindcss

実行環境

• Vite：5.0.8
• react：18.2.0
• typescript：5.2.2
• tailwindcss：3.4.0

環境構築方法

tailwindcssのドキュメント通りにやれば構築できますが、フレームワークごとに環境の構築方法が若干異なっていたので、注意が必要かと思います。
今回はViteを使用するので、Framework Guides > Viteを参考にします。

1. プロジェクトの作成

以下のコマンドでVite プロジェクトを作成します。

npm create vite@latest

2.Tailwind CSSのインストール

以下のコマンドでtailwindcssをインストールします。
コマンドを実行すると次の2ファイルが生成されます。

• postcss.config.js
• tailwind.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

postcss.config.jsとtailwind.config.jsの中身はデフォルトで以下のようになっていると思います。

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.tailwind.config.jsファイルの内容を変更

contentの中身を以下のように更新します。

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

4.ディレクティブをファイルに追加

プロジェクトを作成した際に作成されるindex.cssファイルに以下のディレクティブを追加します。

index.css

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

@tailwindディレクティブについて、
詳細は以下のドキュメントが参考になるかと思います。

5.起動

ここまでできたらApp.tsxにtailwindcssを使用したコンポーネントを記載し、
tailwindcssが適用されている事を確認します。
今回はApp.tsxは以下のように記述しました。

App.tsx

export default function App() {
    return(
        <>
            <h1>hoge</h1>
            <p className="text-blue-600 font-bold text-5xl ">
              Hello Tailwind
            </p>
        </>
    )
}

補足：スタイルの詳細
text-blue-600：テキストを青色（度合600）に指定。
font-bold：テキストを太字に設定。
text-5xl：テキストのサイズを5xlに設定。

index.cssはmain.tsxで以下のように読み込んでいます。

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './css/index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

次のコマンドで起動します。

npm run dev

実行結果

実行した結果以下のように、tailwindcssが適用されたHello Tailwindが表示されました。

参考