React CRAで簡単に設定できる！初心者向けTailwind CSSのスタイリング方法

Tailwind CSSとはなんですか？
- 事前準備
  - TailwindCSSの導入・インストール
  - Tailwind拡張機能
    - 最後に

前回の記事で、Reactでのスタイリング方法についていくつか紹介しました。

本日は、初心者向けにReactのCRAで「Tailwind CSS」を設定し、スタイリングする方法についてチュートリアルを提供します。

Tailwind CSSは、Reactでのスタイリングに非常に便利なツールであり、この記事ではその設定方法について詳しく解説します。

Tailwind CSSとはなんですか？

Tailwind CSSは、ユーティリティファーストのCSS フレームワークであり、コンポーネントのスタイリングを容易にし、再利用可能なコンポーネントの作成に集中できるように設計されています。

簡単に言えば、Tailwind CSSは、独自のスタイルを使用せずにテンプレートのデザインを構築するために必要なすべてのビルディングブロックを提供するCSS フレームワークです。Tailwindには、独自のコンポーネントライブラリであるTailwind UIがあり、NetflixのようなUIクローンを作成することも可能です。

Tailwind CSSを使用すると、CSSを記述せずにコンポーネントのスタイルを設定でき、カスタマイズが簡単な高品質のコンポーネント部品を提供してくれます。。

Tailwindのユーティリティクラスは、設計システムのデフォルトとユーザー構成の組み合わせに基づいてアトミッククラスを生成します。すべてのスタイルの組み合わせが生成され、ビルド時に未使用のクラスがスタイルシートから削除されます。

CSSモジュールを使用すると、カスタマイズされたBootstrapと同じ結果に対して同じ量の作業が発生します。

しかし、Tailwind CSSは、ブートストラップなどの事前に作成されたコンポーネントライブラリに存在する面倒な再定義プロセスを避けることができます。これは、動的にカスタマイズする必要性がないためです。

Tailwind CSSを使用することで、Bootstrapを使用していくのが嫌気がさしてきた方々には、必要なデザインを実装するときに、インターフェイスでの作業に適していることがわかります。

それでは、Tailwind CSSの作成とインストール方法を解説します。

事前準備

Create React Appでも構いません。

Node.js v12.13.0以降

コマンドでReactプロジェクトの作成をして下さい。

TailwindCSSの導入・インストール

npx create-react-app 任意プロジェクト名

「TailwindCSS」に必要なピア依存関係をインストールしていきます。

Install Tailwind CSS with Create React App - Tailwind CSS

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create React App（またはCRA）は「PostCSS 8」をサポートしていません。

ただし、CRAの開発者は、将来的にPostCSS 8への移行を検討している可能性があります。そのため、CRAを使用している場合は、最新の情報を確認することをお勧めします。

TailwindCSS v2と互換性のあるバージョンの「PostCSS7」PostCSS7をインストールしています。

PostCSSドキュメントに記載されているように

PostCSSは、JSプラグインを使用してスタイルを変換するためのツールです。これらのプラグインは、CSSのlint、変数とmixins(ミックスイン)のサポート、将来のCSS構文のトランスパイル、インライン画像などを実行できます。

Autoprefixerは、CSSを解析しコンパイル済みのCSSルールに不要なベンダープレフィックスを追加と削除するPostCSSプラグインとなります。

animetions、transition、transform、grid、flex、flexboxなどの接頭辞を追加するのに役立ちます。

「Create React Configuration Override」をインストールし起動させます

yarn add @craco/craco

// OR

npm install @craco/craco

@craco/craco - npm

このcracoは、Create React AppのデフォルトではPostCSSの設定を上書きできないので、Tailwindを設定するためにcracoをインストールする必要があるためです。

cracoは「Create React App configuration override 」の略称で、CRAのための簡単で分かりやすい設定レイヤーとなっています。

CRAのすべての利点とカスタマイズを提供し、アプリケーションのルートにcraco.config.jsファイルを追加しeslint・babel・PostCSS設定でカスタマイズすることで、アプリを手動でejectする必要がなくなります。

それでは、package.jsonのscriptsの設定を変更しますこれらはコピペで構いません。

// package.json

  {
 "scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
    },
  }

次に、プロジェクトのルートにcraco.config.jsファイルを作成し「tailwindcss」とPostCSSプラグインとして「autoprefixer」これらを追加します。

// craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

次に、TailwindCSSの構成ファイルを生成します。

npx tailwindcss-cli@latest init

このコマンドは、プロジェクトのベースディレクトリにtailwind.config.jsを作成します。

このファイルには、Tailwindのすべてのデフォルト設定が格納されています。

また、オプションの --fullフラグを追加することで、 Tailwindが持つすべてのデフォルトを含む設定ファイルを生成することも可能です。

Tailwindが内部で使っているデフォルトの設定ファイルと一致するファイルが作成されます。

以下は、Create React App（CRA）でTailwind CSSを使用するためのデフォルトの設定ファイルです。

// tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

※ TypeScriptを使用してる場合はtailwind.config.jsを編集する必要があります。

以下のように変更します。

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  // ...
}

TypeScriptを使用する場合、srcディレクトリ内の.tsおよび.tsxファイルに含まれるクラス名を自動的に検出するために、purgeオプションに.tsおよび.tsx拡張子を含める必要があります。

これにより、ビルド時に未使用のスタイルが削除され、CSSファイルのサイズが最小限に抑えられます。

tailwind.config.jsによって、プロジェクトのルートに最小限のファイルが作成されます。

tailwind.config.jsの各構成は次の通りです

・ purge： TailwindCSSクラスを確認するファイルを指定するために使用され、これにより本番環境で未使用のスタイルとクラスをすべて削除できます。

・ darkMode：これはプロジェクトのダークモードの動作を指定します。

media—ダークモードのスタイル設定は、ユーザーのOSのデフォルトモードに依存するダークモードのメディアクエリに基づいて適用されることを意味します。HTMLドキュメントの親要素にdarkクラスがある場合にダークモードのスタイルが適用されるので注意して下さい。

・ theme：テーマ、フォント、ブレークポイントなどのカラーパレットを変更するために使用できます。

以下に例を示します。

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1a202c',
        secondary: '#2d3748',
      },
      fontFamily: {
        sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
      },
      fontSize: {
        '2xs': '0.625rem', // 10px
      },
    },
  },
  variants: {},
  plugins: [],
}

theme：オプションは、Tailwind CSSのスタイルをカスタマイズするために使用されます。

extend：オプションは、既存のスタイルを拡張するために使用されます。

colors：オプションは、カスタムカラーを追加するために使用されます。

上記の例では、primaryとsecondaryの2つのカスタムカラーを追加しています。

fontFamily：オプションは、カスタムフォントを追加するために使用されます。

上記の例では、Roboto、Helvetica、Arial、sans-serifのフォントファミリーを持つsansクラスを追加しています。

fontSize：オプションは、カスタムフォントサイズを追加するために使用されます。上記の例では、2xsクラスを追加して、10pxのフォントサイズを定義しています。

これらのカスタムスタイルは、@tailwindディレクティブを使用して、JSX内で使用することができます。

例えば、上記の例で定義された primaryカラーを使用するには、以下のようにします。

// JSX

<div className="bg-primary">Hello, Tailwind CSS!</div>

このように、themeオプションを使用することで、Tailwind CSSのスタイルをカスタマイズすることができます。

・ variants： TailwindCSSのコアプラグインに追加のカスタムバリアントを適用できます。

以下はvariantsオプションを使用して、カスタムバリアントを追加する簡単な例となります。

// tailwind.config.js

module.exports = {
  theme: {},
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
  plugins: [],
}

variants：オプションは、Tailwind CSSのスタイルのバリアントをカスタマイズするために使用されます。

extend：オプションは、既存のバリアントを拡張するために使用されます。backgroundColorオプションは、背景色のバリアントをカスタマイズするために使用されます。上記の例では、activeバリアントを追加しています。

textColor：オプションは、テキストカラーのバリアントをカスタマイズするために使用されます。上記の例では、visitedバリアントを追加しています。

これらのカスタムバリアントは、@applyディレクティブを使用して、JSX内で使用することができます。

例えば、上記の例で定義されたactiveバリアントを使用するには、以下のようにします。

// JSX

<button className="bg-blue-500 hover:bg-blue-700 active:bg-blue-800">Click me!</button>

このように、variantsオプションを使用することで、Tailwind CSSのスタイルのバリアントをカスタマイズすることができます。

・ plugins：追加のユーティリティクラス、カスタムバリアント、基本スタイルなどを追加できるプラグインの追加するセクションです。

CSSのpluginsオプションを使用して、カスタムプラグインを追加する簡単な例を以下に示します。

// tailwind.config.js

module.exports = {
  theme: {},
  variants: {},
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
        '.skew-15deg': {
          transform: 'skewY(-15deg)',
        },
      }

      addUtilities(newUtilities)
    },
  ],
}

plugins：オプションは、Tailwind CSSのスタイルにカスタムプラグインを追加するために使用されます。

addUtilities：関数は、新しいユーティリティクラスを追加するために使用されます。

newUtilities：オブジェクトは、新しいユーティリティクラスを定義するために使用されます。上記の例では、.skew-10deg および.skew-15degの2つのユーティリティクラスを追加しています。

transform：プロパティは、要素の変形を制御するために使用されます。上記の例では、skewY()関数を使用して、要素を傾けています。

これらのカスタムプラグインは、@apply ディレクティブを使用して、JSX内で使用することができます。

例えば、上記の例で定義された.skew-10degユーティリティクラスを使用するには、以下のようにします。

<div className="skew-10deg">Hello, Tailwind CSS!</div>

このように、pluginsオプションを使用することで、Tailwind CSSのスタイルにカスタムプラグインを追加することができます。

Tailwind構成の詳しい詳細については、構成ドキュメントを参照してください。

Configuration - Tailwind CSS

以下のように、CRA既存のsrc/index.cssファイルにTailwindを含めるように更新します。

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

html,
body,
#root {
  height: 100%;
}

@tailwindを含むディレクティブは基本的にスタイルをインポートします。

この、@tailwind ディレクティブは、Tailwind CSSのスタイルを使用するための指示です。

これらを使用することで、必要なスタイルを簡単にインポートし、コードを簡潔に保つことができます。また、これらのディレクティブを使用することで、スタイルの一貫性を維持し、開発プロセスを迅速化することができます。

「Output.css」ファイルがあるかと思います。

「Output.css」ファイルは、Tailwind CSSのコンパイルされたCSSファイルです。

このファイルには、Tailwind CSSのスタイルが含まれています。

ただし、「Output.css」ファイルが空の場合、おそらくTailwind CSSの設定が正しくないか、@tailwindディレクティブが正しく構成されていない可能性があります。

その場合には、Tailwind CSSのバージョンが古い可能性があります。最新バージョンにアップグレードしてみてください。

index.jsファイルへ移動しインポートされてるか確認してください。

// index.js

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

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

これで、CRAでのTailwind CSSを使用するための初期設定が完了しました。

次に、サーバーを実行します。

package.jsonで設定したスクリプトnpm startを実行してください。

本来のCSSでは次のようになります。

.button {
  background-color: #4f46e5;
  font-weight: bold;
  border-radius: 9999px;
  padding: 1rem 2rem;
  color: #fff;
}

Tailwind CSSなどのユーティリティクラスでは

// JSX
<div>
      <button type="button" className="bg-indigo-500 font-bold rounded-full py-4 px-8 text-white">ボタン</button>
</div>

See the Pen React TailwindCSS by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

以下はメディアクエリ、デバイスのブレークポイントの場合です。

<div className="w-full md:w-3/4 lg:w-1/2"></div>

この、辺りはまた別途記事にして取り扱いますので、その際は是非お立ち寄りください。

Tailwind拡張機能

さらに効率を上げるのであれば、VSCodeにTailwind拡張機能を追加する必要があります。

拡張機能タブでTailwindを検索しインストールするだけとなります。

VS CodeのTailwind拡張機能は、Tailwind CSSを使用する際に開発者がより効率的に作業できるようにするためのツールです。

テキストエディタを再起動してみて下さい。以下の画像のように自動的に補完候補が表示されているはずです。

Tailwind CSSの拡張機能

この拡張機能の、主な機能は以下となります。

1. IntelliSense：Tailwind CSSのクラス名を入力する際に、自動的に補完候補が表示されます。これにより、タイプミスやスペルミスを防ぎ、開発者の作業効率を向上させます。

2. プレビュー機能：Tailwind CSSのクラス名を入力すると、そのスタイルがどのように見えるかをプレビューできます。これにより、開発者はスタイルを確認しながら作業でき、より正確なスタイルを選択できます。

3. エラーチェック：Tailwind CSSのクラス名に誤りがある場合、エラーメッセージが表示されます。これにより、開発者はスタイルの誤りを素早く特定し、修正できます。

以上のような機能があり、開発者がより効率的にTailwind CSSを使用できるようになります。

これらTailwindはグローバルであり、デフォルトと構成から事前に生成されているのでコンポーネントでスタイルをすぐに書き始めが容易となります。

最後に

Tailwind CSSは、Web開発者にとって非常に便利なCSS フレームワークであることが分かります。

Tailwind CSSを使用することで、簡単にカスタムスタイルを作成することができます。また、Tailwind CSSは、スタイルの再利用性を高めることができます。

CSSのクラス名を使用してスタイルを適用することができ、これにより、HTMLおよびJSX内でスタイルを直接指定する必要がなくなり、スタイルの再利用性が高まります。

また、Tailwind CSSは、スタイルのカスタマイズが非常に簡単であるため、開発者は簡単にカスタムスタイルを作成することができます。

さらに、事前に定義されたスタイルを使用するため、スタイルの一貫性を維持することができます。これにより、開発者はスタイルの一貫性を維持するために時間を費やす必要がなくなります。

総合的に見て、Tailwind CSSは、Web開発者にとって非常に便利なCSS フレームワークであり、スタイルの再利用性を高め、スタイルの一貫性を維持することができます。

開発者は、簡単にカスタムスタイルを作成することができ、開発時間を短縮することができます。

使用できるクラスも沢山ありテーマの作成も楽になります。

本日は以上となります。

最後まで読んで頂きありがとうございました。

この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。

素晴らしいコーディングライフを♪

deve.K's Programming Primer - プログラミング初心者のための入門ブログ

エンジニアが未来を切り開く。

React CRAで簡単に設定できる！初心者向けTailwind CSSのスタイリング方法

Tailwind CSSとはなんですか？

事前準備

TailwindCSSの導入・インストール

Tailwind拡張機能

最後に