Tailwind CSSの設定と実装方法 – v3.0準拠

Tailwind CSSはCSSを効率よく書くためのライブラリーで、とくにモバイルとPCのレスポンシブなデザインを作るときに威力を発揮します。2021年12月にリリースされたv3.0からは使い勝手も大きく向上しました。カラーパレット、ボックスシャドーなどの所定のテーマも備えつつ、JIT機能を使えば完全なカスタムも可能です。よってbootstrapのようなCSSを書かないライブラリーとはアプローチが根本的に異なります。v3.0からは初期設定も簡素化されました。本稿ではTailwind CSSの設定、実装方法(使い方)について詳しく解説いたします。


Tailwind CSSの主な特徴:

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


Tailwind CSSの主な欠点:

  • 初期設定が煩雑 ⇒ Tailwind CSS v3より簡素化
  • 独特の記述方法に慣れる必要がある(慣れると通常のCSSより速く書ける)
  • クラスが多数並ぶとJSXがやや読みにくい

Next.jsでの初期設定

本章ではNext.jsでの初期設定をご紹介します。ReactでTailwind CSSを使用される方は、この章を飛ばして「Reactでの初期設定」の章からご覧ください。

Tailwind CSSのインストール

Tailwind CSS v3の公式ページに、Install Tailwind CSS with Next.jsという案内があります。こちらに従ってももちろん動きますが、インストール後に自分でconfigファイルを作る必要があります。そこでvercel/next.js公式github内のexamples/with-tailwindcssに記載された方法を使用します(configファイルを作ってくれます)。ローカル開発環境に、新しいプロジェクトフォルダを作った後、ターミナルにてnpm installの場合は下記の上段、yarnを使用される方は下記の下段のコマンドを打ちます(2022年3月現在)。”with-tailwindcss-app”の部分はプロジェクトの名称ですので、任意の名称に書き換えてください。

npx create-next-app --example with-tailwindcss with-tailwindcss-app
yarn create next-app --example with-tailwindcss with-tailwindcss-app

なお、既存のプロジェクトにTailwind CSSを加える場合は上記の方法は使えませんので、Tailwind CSS v3公式の方法によってください。その場合でも、上記vercel/next.jsのgithubは参考になると思います(configファイルの書き方の確認など)。

Reactでの初期設定

Tailwind CSSのインストール

Reactの場合は、Tailwind CSS v3の公式ページに記載の方法によります。Next.jsで使用する場合より初期設定が多いように見えますが、v2の頃と比べると大幅に簡素化されています。npx create-react-appコマンドでreactのプロジェクトを作成した後に、下記の2行を実行します。1行目ではTailwind CSS本体と関連する必要なライブラリー(postcss, autoprefixer)のインストールを、2行目でtailwind.config.jsファイルの作成をしています。1行目の -DはDevelopment(開発環境用ライブラリー)の略です。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.jsへのpathの追加

Tailwind CSSを使用するフォルダへのパスをconfig.jsファイルに記述します。下記は公式ホームページにもある例で、pagesフォルダとcomponentsフォルダへのパスを設定しています。同様の書き方で他のフォルダも追加可能です。

Rectの場合:

tailwind.config.js

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Next.jsの場合(examples/with-tailwindcssを使えば、勝手に作ってくれる):

tailwind.config.js

module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

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

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

本セクション「不要なCSSの削除設定(purge)」の説明はTailwind CSS v2の設定です。v3ではpurgeの設定は不要になりました(前述、tailwind.config.jsのcontentの設定で十分)。詳細は公式サイトをご覧ください。また、purgeは本番環境用の設定ですので、開発時は後回しにすることができます。次節「Tailwind.cssのインポート」以降の説明はv3に対応しています。

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

tailwind.config.js

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

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

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

なお、pagesとcomponents以外のフォルダでTailwindを使用する場合は、前述のcontent:の部分をパスも追加設定する必要がありますのでご注意ください(Next.jsとReact共有)。

Tailwind.cssをインポート

続いて、Tailwind.cssをインポートをします。Reactの場合はindex.cssの内容を全て削除し、次の3行に置き換えます。Next.jsの場合はglobals.cssで同じことをしますが、本稿でご紹介したvercel/next.js公式のいインストール方法を使えばこの設定もしてくれます。またそれぞれが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年11月以前のTailwind CSS v2まで、JITはTaiwindの標準機能ではなく、追加のインストールを必要としましたが、2021年12月に登場したTailwind CSS v3により標準化されました。Tailwind CSS v3の方は、以下の設定不要ですので読み飛ばし、次節「Tailwind CSSの実装方法」をご覧ください

Tailwind CSS v2、React、JITの組み合わせが動作が不安定なので、v2で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しか見ていなかった私はここでかなり苦労しました。(注意:JITが標準搭載されたv3では、mode: ‘jit’の設定も不要です。)

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」として記載しています。とくに、padding-topとpadding-bottomをまとめたpy-[ ]と、padding-leftとpadding-rightをまとめたpx-[ ]が便利です。


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など、規定値にはない値を設定する場合は、下記のように鍵括弧で値を記述します(JITの機能)。


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

Space Between

paddingとmarginによく似て異なる機能にSpace Betweenがあります。親要素にSpace Betweenを設定することで、子要素が水平に並ぶ場合には、一番左側(右側)の要素の左側(右側)にはmarginを設けず、要素の間にだけmarginを設定できます。同様に、子要素が縦に並ぶ場合には最上段(最下段)の上(下)にはmarginを設けずに、子要素の間にだけmarginを設定できます。これをCSSだけで実現しようとするとやや面倒で、この機能だけでもTailWind CSSを使う価値があります。

Space Between – 水平方向に並ぶ子要素

ClassPropeties
space-x-0.5margin-left: 0.125rem;(左端の子要素を除く、以下同じ)
space-x-1margin-left: 0.25rem;
space-x-1.5margin-left: 0.375rem;
space-x-2margin-left: 0.5rem;
space-x-3margin-left: 0.75rem;
space-x-4margin-left: 1rem;

Space Between – 垂直方向に並ぶ子要素

ClassPropeties
space-y-0.5margin-top: 0.125rem;(最上段の子要素を除く、以下同じ)
space-y-1margin-top: 0.25rem;
space-y-1.5margin-top: 0.375rem;
space-y-2margin-top: 0.5rem;
space-y-3margin-top: 0.75rem;
space-y-4margin-top: 1rem;

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 = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
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の内容などの詳細についてはこちらの公式ドキュメントをご覧ください。

応用編 – カスタムクラスの作成

index.css(Reactの場合)又はglobals.css(Nextの場合)に追加の記述をすることで、Tailwindでもカスタムクラス(コンポーネント)の作成、すなわち複数CSSをまとめた本来のクラスの使い方が可能です。下記の例ではhoverbuttonというクラスに8つのTailwindのCSS(h-5からhover:scale-125まで)を設定し、マウスのホバー効果を詳細に設定しています。

設定方法は下記見ての通りですが、@layer componentsに続く波括弧の中にクラス名を書き、クラス名に続く波括弧の中に具体的にTailwindのCSSを並べます。並べるTailwindのCSSの冒頭に@applyを書きます。

globals.css

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

@layer components {
.hoverbutton {
@apply h-5 w-5 transform cursor-pointer transition duration-100 ease-out hover:scale-125;
}
}

カスタムクラスの使い方は通常のTailwind CSSと同様に、className=”カスタムクラス名”で可能です。下記はTailwind公式アイコンのheroiconsからインポートしたアイコンに、上記で設定したカスタムクラスのほhoverbuttonを設定した例です。なお、heroiconsを使うには別途npm installを要します。

Center.js

import { RewindIcon, SwitchHorizontalIcon } from '@heroicons/react/solid';

function Center() {
return (
< div>
< SwitchHorizontalIcon className="hoverbutton" />
< RewindIcon className="hoverbutton" />
</ div>
);
};

export default Center;

応用編 – プラグインの追加

前のセクションで代表的なTailwind CSSの規定クラスを紹介しましたが、pluginを追加することでこれらを増やすことができます。例えば、overflow(要素のはみ出し)をscroll(スクロール)に設定したときに、スクロールバーの機能を維持したたま、表示を消したいことがあると思います。この場合は、tailwind-scrollbar-hideというプラグイン(2021年12月リリース)を追加することで簡単に実装できます。以下、tailwind-scrollbar-hideを例にプラグインの追加方法をご紹介します。なお、プラグインには追加インストールが不要な公式プラグインと、本件のように追加インストールを要する非公式プラグインがありますが、インストールの有無を除くと設定は両者で共通です。まずはnpmを使ってインポートします。npmの方は上段、yarnの方は下段です。こちらのgithub repositoryでも確認できます。

npm install tailwind-scrollbar-hide
yarn add tailwind-scrollbar-hide

次にtailwind.config.jsのpluginsの部分に今インストールしたプラグインを追加します。plugins:に続く角括弧の中に、require(’パッケージ名’)を記述します。

tailwind.config.js

module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require('tailwind-scrollbar-hide'),
],
}

プラグインの設定は以上です。CSSの追加は、他のTailwind CSSと同様、固有のクラス名を追加することで可能です。本件の場合は、下記のように”scrollbar-hide”と記述します。セットになることが多いh-screenとoverflow-y-scrollも併せて書いてあります。


< div className="h-screen overflow-y-scroll scrollbar-hide" ></ div>

daisyUI

daisyUIも有名なTailwindのプラグインで、Material UIやSemantec UIに似たUIを提供してくれます。tailwind-scrollbar-hideと同様にnpm iでインストールした後、tailwind.config.jsのpluginsへの追加で使用可能です。

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>

もう一つテキストサイズを3段階で調整する例をご紹介します。上記の例と同様に一番左側に最も画面サイズが小さい場合のcssを設定します(デフォルト値)。中間にmdの閾値を挟み、右にxlの閾値を設定します。テキストサイズはそれぞれ、text-sm(0.875rem 14px), text-lg(1.125rem 18px), text-2xl(1.5rem 24px)としました。


< div className="text-sm md:text-lg xl:text-2xl" ></ div>

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