ReactでTailwind CSSを使いたい初心者向け。Reactアプリへのインストールを具体的に解説！

TailwindCSSを触ってみよう

相変わらず仕事では奮闘中です。
UIに限らずデザイン全般は色々と挑戦中。そして世のデザイナーさんは偉大だなあと日々感じます（1個のデザインでも思いつかないと無限に時間が溶ける...）。あと表現力を身につけたいです。
というのはさておき。今日は先月も話していたTailwindCSSを実際に触ってみようかと思います。

転職活動中、適当に作っていたReactのアプリ・・・、放置気味だったのでこれを機にTailwindCSSを勉強するための教材にします。

まずはインストールだ

Macのターミナルからインストールしていきましょう。
今回やりたいのは、既存のReactプロジェクトにTailwindを追加します。
Tailwindのバージョンはv4というのが最新っぽいです。今回特にv3をわざわざ入れる必要もないので、最新のv4にします。ちなみに何が変わったかは以下を参照。
Tailwindのカスタマイズ方法がJavaScriptファイルからCSSファイルになったようです。

3Dの表現やアニメーション表現もクラスを指定するだけで可能になったとのこと。今度試してみます。

それではv4をLet's install!

現在の状態はこんな感じ。Reactの準備は整っています。結構前にインストールしましたが現状VITE v7.2.4は比較的新しい方だそうなのでこのバージョンのまま進めます。

そもそもReactとViteって？

結構前にインストールしてなんとなく触ったりはしたものの、そもそも、ReactとViteってなんだろう。という感じもあるので、少し調べます。

Reactは、UIを構築するためのライブラリ。ViteはReactアプリを開発と実行するためのツールとのこと。ViteとReactは別物なんですね。

インストールとTailwind CSSの設定手順

Tailwind CSSをインストールする

npm install tailwindcss @tailwindcss/vite

上記のコマンドを実行して、Tailwind CSSをインストールできました！「added 14 packages」と出ているのでOK。


ちゃんとv4が入ってます。
ターミナルでの操作はこれで終わり、次は、各ファイルで設定します。

Viteの書き換え

を以下に書き換えます。（ViteにTailwindを使うことを教える設定に書き加えます）

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

cssの編集

srcフォルダを確認します。

この中の、main.jsxを見て、

importがどのcssファイルなのかを確認します。

index.cssの中身を、一番上に書きます。

@import "tailwindcss";

元々入っているCSSはそのままでも問題ないです。

これでインストールと設定は一通り完了です！

次に、Tailwind CSSで装飾してみよう

今、こんな感じです。Tailwind CSSをインストールして、見た目が少し変わりました。

本当にインストールできているのか、確認してみましょう。
/src/App.jsx（Reactのメイン画面のファイル）　で、Tailwind CSSのクラスを入れてみます。

今はインラインでCSSのスタイリングもされてますが、まあ問題はないので一旦このまま進めます。

ではインストールされているか確認のために、この公式ドキュメントを見ながらh1のクラスを入れてみます！className="text-red-500"を入れてタイトルが赤になれば成功！

ドキドキしつつ、更新！！！

赤字になってました！！　わ〜い。
とりあえずインストールできたので、よかったです。
来月は、デザイン変更してみようかなと思います！