deve.K

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

English

React.js でTailwindのCSSを使用する 設定方法


スポンサーリンク

react画像

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

dev-k.hatenablog.com

そちらの続きとしまして、Reactで『Tailwind CSS』を設定しスタイリングする方法を初学者様向けにチュートリアルをしていきたいと思います。

Tailwind CSSとはなんですか?

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

簡単に言ってしまえば、独自のスタイルを使用せずにテンプレートのデザインを構築するために必要なすべてのビルディングブロックを提供するCSSフレームワークとなります。

『Tailwind』では、最新のBootstrapに相当する『TailwindUI』と呼ばれる独自のコンポーネントライブラリが存在し、NetflixのようなUIクローンを作成する事も可能となります。

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

CSSモジュールでの利点は、ローカルスコープでの明示的な依存関係、およびグローバルCSSの防止による、ファイル間のCSSでの名前競合が防げることです。

これは素晴らしい機能です、もちろんですが欠点もあります『Tailwind』はユーティリティファーストですが 、Reactでの『CSS modules』では設計システムでのユーティリティがないのが欠点となります。

『Tailwind』のユーティリティクラス(CSSフレームワーク)は、設計システムのデフォルトとユーザー構成の組み合わせに基づいており

アトミッククラスを生成します。構成とデフォルトからすべてのスタイルの組み合わせが生成され、ビルド時に未使用のクラスがスタイルシートから削除されます。

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

ブートストラップなどは元に戻すのが難しい設計上となっており事前に定義されたコンポーネントが付属しているため、動的にカスタマイズする必要性がありません。

なのでブートストラップのような事前に作成されたコンポーネントライブラリに存在する面倒な再定義プロセスを避ける為でもあるのがTailwindCSSとなります。

『TailwindCSS』ではBootstrapを使用していくのが嫌気がさしてきた方々には『Tailwind CSS』が提供するユーティリティクラスを使用し必要なデザインを実装するときに、インターフェイスでの作業に適していることがよくわかってきます。

それでは『TailwindCSS』の作成とインストールをする方法をご紹介致します。

事前準備

Create React Appでも構いません。

Node.js v12.13.0以降


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

TailwindCSSの導入・インストール

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

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

Installation: 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』をサポートしていません。

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

yarn add @craco/craco

OR

npm install @craco/craco 

@craco/craco - npm

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

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

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

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

TailwindCSSの構成ファイルを生成します

npx tailwindcss-cli@latest init
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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

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

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

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

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

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

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

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

・plugins: 追加のユーティリティクラス、カスタムバリアント、基本スタイルなどを追加できるプラグインの追加するセクション。 今のところ、2つの変更を加えるだけとなります。

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

Configuration - Tailwind CSS

CRA既存の『src/index.css』ファイルにこれらのコードを置き換え(貼り付け)て下さい。

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

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

『Output.css』ファイルがあるかと思いますがこれは、Postcssで処理されるため、空のままにしておきます。

import './index.css';

『index.js』ファイルへ移動しインポートされてるか確認し、『npm start』を実行してください。


どのようにスタイリング用のクラスを追加するのかですが

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

.font-sans {    
  font-family: 'Inter var', 'Helvetica Neue', Arial, sans-serif;
}

.text-base {    
  font-size: 1rem;  
  line-height: 1.5rem;
}

.font-medium {  
  font-weight: 500;
}

.rounded-lg {   
  border-radius: .5rem;
}

.bg-gray-100 {  
  background-color: rgb(243, 244, 246);
}

.text-black {   
  color: rgb(0, 0, 0);
}

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

<div class='text-base font-sans font-medium rounded-lg bg-gray-100 text-black'>Button</div>

メディアクエリ、デバイスブレークポイントの場合

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

この辺りはまた記事にします。

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

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

テキストエディタを再起動してみて下さい。

f:id:dev04K:20211230062738j:plain

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

スタイルをインポートしたり、自分で作成したりする必要はありません。

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

今回での当ブログの記事で取り上げたのは、TailwindCSSのインストールから設定・基礎的な紹介となります。

詳しくは公式ドキュメントを参照下さい。

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

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

プライバシーポリシー