2024/10/21 AM【学習記録】ViteでTailwind CSSをインストール

少しずつ、開発環境の構築の要領をつかめてきました。

今日の午前は、開発環境の構築。
特に一番悩んだのが、Tailwind CSSのインストールです。
どのコマンドでインストールすればよいか迷いましたが、公式サイトを見たり、AIに聞いたりして焦らずに進めました。

TailwindCSSの公式サイトを参考にViteでTailwind CSSをインストールしたので、学習の記録用にインストール手順を残しておきます。

Install Tailwind CSS with Vite - Tailwind CSS

先日プロジェクトを構築したため、「手順2」から進めます。

ViteでTailwind CSSをインストール

2．Tailwind CSSと依存パッケージのインストール

以下のコマンドを実行して、Tailwind CSSとPostCSS、Autoprefixerをインストールをする。

pnpm add -D tailwindcss postcss autoprefixer

PostCSSは、CSSを処理して便利な機能を追加するためのツール。
Autoprefixerは、PostCSSのプラグインで、CSSが古いブラウザでも動くようにするもの。

3．Tailwind CSSの設定ファイル生成

Tailwind CSSの設定ファイル（tailwind.config.js）と、PostCSSの設定ファイル（postcss.config.js）を、以下のコマンドで両方を同時に生成する。

pnpm dlx tailwindcss init -p

これにより、tailwind.config.js と postcss.config.jsがプロジェクトのルートディレクトリに作成される。

tailwind.config.js: TailwindCSSのカスタマイズ設定を行うファイル。
postcss.config.js: PostCSSのプラグイン設定を行うファイル。

4．Tailwindの設定

tailwind.config.js ファイルを開き、以下のように設定する。

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

5．CSSファイルの作成

srcディレクトリ内のindex.cssファイルに、以下のコードを追加する。

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

6．CSSのインポート

src/main.tsxファイルで、index.cssをインポートする。

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

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

7．開発サーバーの起動

すべての設定が完了したら、以下のコマンドで開発サーバーを起動し、Tailwind CSSが正しく適用されているか確認する。

pnpm run dev

ViteとReactの初期画面

App.tsxファイルに変更を加えたところ、ブラウザに反映されました！

text-red-500クラスを追加したら、文字が赤くなった

これでTailwind CSSが正しく適用されているかを確認できました。

午後もがんばります！