ReactでTailwindcss使用してWebアプリケーション開発

今回は最近流行のCSSフレームワーク「TailwindCss」をReactのプロジェクトにインストールして作成する方法を解説します。ぶっちゃけ、「Next.js」のプロジェクトで使用するなら、デフォルトでTailwindCSSを使用するかどうかを聞いてくれるので、使用できるならNext.jsを使用したほうが良いと思います。(あと、便利なライブラリがNext.jsにはあるのですが、それは一番最後に少し書いておきます。)

1. まず、Reactのプロジェクトを作成します。プロジェクトを作成したいディレクトリで以下のコマンドを使用します。

$ npx create-react-app app-name

2. 次にプロジェクトをエディタで開きます。VSCodeを使用します。VSCodeでは、メニューバーから「ターミナル」→「新しいターミナル」を使用して、コマンドラインツールを開き、そのプロジェクト上で以下のコマンドを使用します。

$ npm install -D tailwindcss
$ npx tailwindcss init

3. 次にtailwind.config.jsを書き換えます。上記の2つのコマンドを実行すると、tailwind.config.js(Typescriptで開発している場合にはtailwind.config.ts)ファイルが生成されているので、「tailwind.config.js」ファイルに「content:[“CSSを使いたいところまでのパス”]」を書き込みます。特に何もいじっていなければ、下記の書き方でパスを指定することができます。

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [“./src/**/*.{js,jsx,ts,tsx}”],
theme: {
extend: {},
},
plugins: [],
}

4. tailwindcssを使用したいファイルのcssファイルに以下の設定を書き込みます。今回はプロジェクトで作成時に自動で生成される「App.css」ファイルに以下の３行を書き込みます。

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

5. App.cssを読み込んだjsxファイルに作りたいコンポーネントを書き込みます。今回は「App.js」ファイルの中身を書き換えて、tailwindcssが正常に動作しているかどうかを確かめます。App.jsではクリックするたびにクリックの回数をカウントして、クリックした回数が偶数回か奇数回かを確かめるようなWebページを作成します。Hooksなどの使い方がわからない人は他の記事でHooksの基本的な使い方を解説するような記事を作成するので、記事が作成されたらそちらを読んでください。

import { useState } from “react”;
import “./App.css”;

function App() {
  const [isShow, setIsShow] = useState(false);
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setIsShow(!isShow);
    setCount(count + 1);
  };
  return (
    <div className=”flex flex-col w-full justify-center items-center”>
      <h1 className=”text-2xl”>TailwindCssの世界にようこそ!</h1>
      <button
        className=”w-40 bg-green-400 duration-300 hover:opacity-70 rounded-xl mt-4″
        onClick={handleClick}
      >
        ここをクリック!
      </button>
      <div className=”w-full flex flex-col items-center”>
        {isShow ? (
          <div className=”mt-2″>奇数回クリックされました</div>
        ) : (
          <div className=”mt-2″>偶数回クリックされました</div>
        )}
        <label className=”mt-4″>{`${count}回クリックされました`}</label>
      </div>
    </div>
  );
}

export default App;

上記のコードを写経しましょう。tailwindcssではclassName=””の中に用意されているクラス名をスペースで区切って入れることで, cssを当てることができます。

5.最後にtailwindcssが正常に動作しているかを確認するために、ターミナルに下記のコマンドを打ってアプリケーションを起動してみましょう。

$ npm start

緑色のボタンが出てきて、要素が中央によっていたら成功です。

今回紹介したTailwindcssは「Next.js」のプロジェクトで使用することによって、同じTailwindチームが作成した、綺麗なアイコンが簡単に表示できる「HeroIcons」とUIの機能だけを提供する「HeadlessUI」と組み合わせて、簡単に美しいWebページを作成することができるようになります。Reactで開発するよりも、Next.jsで開発すると便利なことも多いですが、今回は復習も兼ねてこのような記事を執筆しました。