Tailwind CSSの設定と実装方法 – JITも解説

↓応援クリックよろしくお願いします↓

にほんブログ村 IT技術ブログ プログラム・プログラマーへ




Tailwind CSSはCSSを非常に効率よく書くためのライブラリーで、とくにモバイルとPCのレスポンシブなデザインを作るときに威力を発揮します。カラーパレット、ボックスシャドーなどの所定のテーマも備えますが、Tailwind JITを使えば完全なカスタムも可能なので、bootstrapのようなCSSを書かないライブラリーとはアプローチが根本的に異なります。


Tailwind CSSの主な特徴:

  • レスポンシブに強い
  • 効率よくCSSを書ける
  • 便利なテーマを備えるも、Tailwind JITにより完全なカスタマイズが可能
  • ダークモードの設定が容易
  • ビルド時に不要なCSSが削ぎ落される(軽い)
  • ReactでもVueでも動く


Tailwind CSSの主な欠点:

  • 初期設定が煩雑(本稿で解説)
  • 独特の記述方法に慣れる必要がある(慣れると通常のCSSより速く書ける)
  • クラス名が長くなるとJSXがやや読みにくい


Next.jsでの初期設定

本章ではNext.jsでの初期設定をご紹介します。2021年5月現在、React上でTailwind JIT(後述)の機能が不安定なので、Tailwind CSSはReactではなくNext.jsでの使用をお勧めいたします。Tailwind JITを使わずReactでTailwind CSSを使用される方は、この章を飛ばして「Reactでの初期設定」の章からご覧ください。

Tailwind CSSのインストール

Next.jsのプロジェクトを作り、cdで同プロジェクトに入った後、ライブラリーのインストールをします。Next.jsのバージョンが10の場合は上段、9以下の場合場合は下段をインストールします(2021年5月現在)。postcssとautoprefixerはバージョンによる互換性がないことがあるので、常に両者とも最新のものをインストールすればよいというものではありません(インストール時は公式ドキュメントで要確認)。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

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

なお、”-D”は開発環境用という意味です。上記をインストール後のpackage.jsonを見ると次のようになっています(Next.jsの場合)。dependenciesが本番環境でも使うライブラリー、devDependenciesが開発環境だけで用いるライブラリーです。


コンフィグレーションファイルの作成

Tailwind CSS用のコンフィグレーションファイルを2つ(tailwind.config.jsとpostcss.config)作成します。Next.jsの環境では手動で作成する必要はなく、下記のコードにより自動で作成してくれます。

npx tailwindcss init -p

Reactでの初期設定

Tailwind CSSのインストール

下記1行目はNext.sjのバージョン9以下のときと同じです。2行目のCRACOはCreate React App Configuration Overrideの頭文字をとったもので、Reactでのコンフィギュレーション(各種設定)を容易にするためのミドルウェアです。Next.jsでは不要ですが、ReactでTailwindを動かすにはCRACOを経由する必要があります。

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

npm install @craco/craco

package.jsonの書き換え

ReactでCRACOを経由したコンフィギュレーションとするため、pacakge.jsonのstart, test, buildの”react-scripts”とある部分を”craco”に書き換えます。CRACOではejectは使わない(迂回する)ので、ejectの部分は”react-scripts”のままです。下記、書き換え後のpackage.jsonのscripts部分です。

package.json

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

craco.config.jsの作成

package.jsonと同じ階層に、craco.config.jsを作成します。内容次の通りです。

craco.config.json

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

コンフィグレーションファイルの作成

tailwind.config.jsファイルを作成します。手動で作成するのではなく、次のコードを使います。

npx tailwindcss init

autoprefixerが見つかりませんとのエラーが出た場合でも、package.jsonと同じ階層に、tailwind.config.jsが作成されていれば大丈夫です。tailwind.config.jsができない場合は、手動で作成します。

ReactとNext.jsで共通の初期設定

不要なCSSの削除設定(purge)

冒頭でTailwind CSSの特徴的な機能の一つとして、ビルドの過程で不要なCSSが削ぎ落される機能をご紹介しました。この機能を有効とするため、コンフィグレーションファイル(tailwind.config.js)内で、CSSが記述される可能性のあるファイルを全て指定します(正規表現を使用)。下記、公式ドキュメントにある例で、purgeの部分で指定します。

tailwind.config.js

module.exports = {
purge: [‘./pages/**/*.{js,ts,jsx,tsx}’, ‘./components/**/*.{js,ts,jsx,tsx}’],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

**はフォルダパスだけで使用する正規表現で、この例ではpagesの直下又はそのサブディレクトリーにあるファイルを全て指定できます。*はファイル名に使用する正規表現で任意の文字列を意味します。よって公式ドキュメントの例では、pagesフォルダとcomponentsフォルダ内の全てのファイル(コンポーネント)が対象になります。

公式ドキュメントの例のように、pagesフォルダ内にURLパスを割り当てられるページコンポーネントを置き、componentフォルダ内にはURLの割り当てを受けない純粋なコンポーネントを置くことは多いと思います。もちろん、tailwind.config.jsのpurge:[]の部分で他のフォルダを指定することもできます。

Tailwind.cssをインポート

続いて、Tailwind.cssをインポートをします。Reactの場合はindex.cssの内容を全て削除し、次の3行に置き換えます。Next.jsの場合はglobal.cssで同じことをします。またそれぞれがindex.js(Reactの場合)又は_app.js(Next.jsの場合)でインポートされていることも確認します。

index.css

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

続いて、公式ドキュメントには記載がありませんが、余計なCSSを消したいのでReactの場合はApp.cssの内容を全て削除します。Next.jsの場合はHome.module.cssの内容を全て削除します。あるいはファイルごと削除します。ここまで来たら、サーバをrestartします。Reactの場合はnpm start、Next.jsの場合はnpm run devです。

VS Codeの拡張機能のインストール

Tailwindcssを記述するときは、kiteやtabnine等のオートコンプリートでは入力補完してくれないので、専用の拡張機能”Tailwind CSS IntelliSense”をインストールします。オートコンプリートの他、クラス名にカーソルを合わせたときに実際のCSSを画面上に表示する機能もあります(後述)。インストール後も、補完機能が動かない場合kiteやtabnineをdisable(無効化)します。



Tailwind JIT

Tailwind JITは、2021年に追加された画期的な逐次コンフィギュレーション機能です。Just-In-Time(JIT)登場以前のTailwindでは、既定のカラーパレットやpaddingの幅しか使えず、所定の値以外の色やピクセル値を使いたい場合はコンフィギュレーションファイルで、いちいち追加指定する必要がありました。また、余計なCSSを削ぎ落すpurge機能はビルドを経て本番環境CSSを軽くしますが、開発段階では何もしてくれないので、開発環境のCSSが肥大化する問題がありました。

Tailwind JITを使うと、コンフィギュレーションファイルに追加せずとも、JSX内で任意の値や色が使えるようになり、かつ、都度ビルドしてくれるので開発環境がずっと軽量化されます。

2021年5月現在、JITはTaiwindの標準機能ではなく、追加のインストールを要します。新しい機能でアップデートが続くと思います。インストール時は、こちらのTailwind CSSの公式ドキュメントJITのgithubで最新の情報を確認してください。

また、2021年5月現在、JITはNext.jsでは快適に動きReactでは不安定なのでJITを使いたい方はNext.jsでの使用をお勧めいたします。Next.jsの使い方は私のこちらの記事でも簡単に解説しています。

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

Tailwind JITのインストール後、postcss.config.jsを書きに書き換え、tailwind.config.jsにmode:”jit”を追記します。Next.jsとReactで共通です。後者tailwind.config.jsへの追記は、Tailwind CSSの公式ブログには記載があるのですが、JITのgithubに記載がなかったのでgithubしか見ていなかった私はここでかなり苦労しました。

postcss.config.js

module.exports = {
plugins: {
‘@tailwindcss/jit’: {},
autoprefixer: {},
},
};

tailwind.config.js

module.exports = {
mode: ‘jit’,
purge: [‘./pages/**/*.{js,ts,jsx,tsx}’, ‘./components/**/*.{js,ts,jsx,tsx}’],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

以上でやっと初期設定が完了しました。お疲れ様でした。続いてTailwind CSSの使い方をご紹介します。

Tailwind CSSの実装方法

PaddingとMargin

始めにpaddingとmarginを例にTailwind CSSの記述の仕方をご紹介します。paddingとmarginは所定値で使う方法と、JITを利用してカスタムで値を入れる方法があります。

paddingの主な規定クラス名と対応するpaddingの値は下記の通りです。marginの場合はクラス名のpの部分がmになるだけです。実際にはもっと多いです(公式ドキュメント要確認)。


ClassPropeties
p-0padding: 0px;
p-1padding: 0.25rem;
p-2padding: 0.5rem;
p-3padding: 0.75rem;
p-4padding: 1rem;
p-5padding: 1.25rem;
p-10padding: 2.5rem;
p-20padding: 5rem;

また、paddingをright, left, top, bottomに記載する場合は次のように記載します。幅は全て0.25remの「1」として記載しています。


ClassPropeties
py-1padding-top: 0.25rem;
padding-bottom: 0.25rem;
px-1padding-left: 0.25rem;
padding-right: 0.25rem;
pt-1padding-top: 0.25rem;
pb-1padding-bottom: 0.72rem;
pr-1padding-right: 0.25rem;
pl-1padding-left:0.25rem;


クラス名が付与されていることからもわかる通り、これらを直接クラス名としてJSXの中に記述できます。例えば、divタグに1remのmargin(m-4)と0.25remのpadding(p-1)を設定する場合は次のように記載します。classNameとした部分はclassでも動きます。


< div className=”m-4 p-1″>Hello World</ div>

Tailwind CSS IntelliSenseのインストールされたVS CodeではTailwind CSSのクラス名にカーソルを合わせると、次のように実際に適用されるCSSが表示されます(m-4の例)。



margin 13pxやpadding 7pxなど、規定値にはない値を使いたい場合は、前述のTailwind JITをインストールした上で、下記のように鍵括弧で値を記述します。


< div className=”m-[13px] p-[7px]” >Hello World</ div>

Background Color

Tailwind CSSは全てのCSSに対応しているので、事例をあげるときりがないのですが、続いてBackground Color(背景色)を紹介します。Tailwind CSSでは下記のようにblueやgreenなどの代表的な色に対して数字を付けることでグラデーションの付いたカラーパレットが使用できます。数字は50の次は100、以降100刻みで900まであります。

indigoを例にクラス名とRGBを並べると次のようになります。A(opacity)の1は不要ですが、Tailwind CSSでは1が挿入されます。


ClassPropeties
bg-indigo-50background-color: rgba(238,242,255,1);
bg-indigo-100background-color: rgba(224, 231, 255,1);
bg-indigo-200background-color: rgba(199,210,254,1);
bg-indigo-300background-color: rgba(165,180,252,1);
bg-indigo-400background-color: rgba(129,140,248,1);
bg-indigo-500background-color: rgba(99,102,241,1);
bg-indigo-600background-color: rgba(79,70,229,1);
bg-indigo-700background-color: rgba(67,56,202,1);
bg-indigo-800background-color: rgba(55,48,163,1);
bg-indigo-900background-color: rgba(49,46,129,1);

JSX内での書き方はmargin paddingの例と同じです。


< div className=”m-4 p-1 bg-indigo-300″>Hello World</ div>

任意の色を使う場合は、HEX値で鍵括弧の内側に書きます。JSXはやや読みにくくなりますが、別のCSSファイルにbackgroundcolorと書く場合と比較すると、クラス名に直接二文字bgとするだけなので、ずっと早くCSSを書けます。


< div className=”m-[13px] p-[7px] bg-[#1da1f1]” >Hello World</ div>

Flexbox

flexboxの主なクラス名と対応するCSSは次の通りです。flexboxもTailwindで書くとシンプルです。


ClassPropeties
flexdisplay: flex;
flex-colflex-direction: column;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
items-centeralign-items: center;
flex-1flex: 1 1 0%;
gap-x-3column-gap: 0.75rem;

flex-0.5やflex-0.3は、flex-[0.5]、flex-[0.3]としても動かないので、コンフィギュレーションファイルで設定する必要があります。先ほどの設定でmodeやpurgeを設定したtailwind.config.jsファイルのthemeに追加します。

公式ドキュメントにある通り1, auto, initial, noneの4つは規定値ですが、もともとのtailwind.config.cssには記載はありません。ここに0.3や0.5などのカスタムのクラス名を加えると、4つの規定値は無効化されてしまうので、4つを残したい場合は下記のように明示的に書く必要があります。


tailwind.config.js

module.exports = {
mode: ‘jit’,
purge: [‘./pages/**/*.{js,ts,jsx,tsx}’, ‘./components/**/*.{js,ts,jsx,tsx}’],
darkMode: false,
theme: {
flex: {
0.5: “0.5”,
0.3: “0.3”
1: “1 1 0%”
auto: “1 1 auto”
initial: “0 1 auto”
none: “none”
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

クラス名の書き方は、margin padding と同じなので省略します。

Box Shadow

box-shadowのCSSを何も見ずに書ける人はあまり多くないと思います。私も毎回ネットで検索してコピペしてから微調整をしてbox-shadowを作ります。Tailwind CSSでは便利な6つのクラスを用意してくれています。


ここまで読んで頂いた方はもう上記の画像を見ただけで使い方はわかると思います。CSSの内容などの詳細についてはこちらの公式ドキュメントをご覧ください。

Tailwind CSSによるレスポンシブなサイトの作り方

本稿の最後にTailwind CSSを使ったレスポンシブなサイトの作り方を簡単にご紹介します。レスポンシブなサイトを作る場合、画面サイズの大きいPCのデザインをCSSに記述し、平行してあるいは後から画面サイズを閾値として、モバイル用のCSSを加えることが多いと思います。

Tailwind CSSはレスポンシブな記述が容易なので、容易にこの関係を逆にできます。記法上も、最も小さい画面サイズから始まり閾値を設定した場合は同閾値を超えると大きい画面のデザインに移行する構造をしています。

規定では5つの閾値が設定されています。これ以外を使うことはあまりないと思います。


Breakpoint閾値 @media (min-width: [ ]px) {}
sm640px
md768px
lg1024px
xl1280px
2xl1536px

flexboxを例に、640px以下の幅では子要素を縦に並べ(flex-col)、画面の幅がsmの640pxを超えたら子要素を横に並べる(flex-row)場合は次のように書きます。


< div className=”flex flex-col sm:flex-row” ></ div>

通常は、下記のように複数のCSSを適用すると思います。複数の場合もそれぞれの頭にsm:を付けるだけです。text-centerはtext-align: center, text-leftはtext-align: leftです。


< div className=”flex flex-col text-center sm:flex-row sm:text-left” ></ div>

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