利用者爆増中 初めてでもわかるTailwind CSS入門 基礎編

本文書は、Taliwind CSSをこれまで使ったことがない人向けの入門者向けの内容になっています。2回にわけて説明を行っていますが、1回目の本文書はTailwind CSSの環境の構築を行い基本的な設定とカスタマイズ方法について説明を行います。2回目では本文書では触れていないFlexboxやブレイクポイント、レスポンシブデザインについて、実践的なナビゲーションバーを作成しながらTailwind CSSの理解を深めていきます。

Tailwind CSSとは

Tailwind CSSはutility classを活用したCSSフレームワークです。CSSフレームワークといえばBootstrap、BulmaやMaterial UIなどを思い浮かべる人は多いと思います。BootstrapやBulmaなどのフレームワークでは事前に準備されているボタン、メニュー、パンくずリストなどのコンポーネントを活用してデザインを行っていきます。Tailwind CSSではコンポーネントは準備されておらずutility classを使って独自のボタンを作成しデザインを行っていきます。

Bootstrapなどのフレームワークではコンポーネントが事前に準備されていることでサイトデザインを効率的に行うことができる判明、同じデザインを使うためオリジナルティがないという欠点があると言われています。それに比べてTailwind CSSではコンポーネントが準備されていないため、同じボタンというコンポーネントを作成するにも各自が異なるclassを適用して作成していくことになるため結果としてオリジナリティの高いサイトを作成することができます。

どんなサイトでTailwindCSSは利用されている？

どのようなサイトがTailwindCSSを利用しているのか気になるという人もいるかと思います。例えば下記のようなサイトで利用されています。

• Clubhouse
• meetup.com
• Netflix Top 10

utility classとは

例えばBootstrapでボタンを作成したい場合にはclassにはbtnを設定することになります。しかし、Tailwindではボタンを作成するためのbtnといったclassは存在せず下記のようにutility classを記述することでボタンを作成することができます。設定するclassが多すぎると思われるかもしれませんが使っていくにすぐに慣れるので学習コストもかなり低いです。class名がわからない時もTailwind CSSのドキュメントで検索すればすぐにわかります。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>

bg-indigo-700は色の設定、font-semiboldはフォントの太さ、text-whiteはテキストの色、py-2は左右のpadding、pxは上下のpadding、roundedは角の丸みを設定を行っています。

ここで設定しているutility classはclass自体が特定の意味を持っておらず(btnではボタンという意味を持っている)、さまざまな場所で利用することができる(ある時はボタンに利用、ある時はナビゲーションリンクに利用など)ためutility class(ユーティリティクラス)という名前がついています。utility classは事前にTailwind CSSの中で事前に設定が行われているClassです。

文字の大きさでも9種類、色の数ではかなりの数のutility classが準備されているのでcssのスタイルを独自に記述することなくhtmlファイルのみを更新することでデザインを行うことができます。

Tailwind CSSのutility classに登録されていない色を利用したい場合はどうするのかといった疑問もでてくるかと思います。そのような場合は、Tailwind CSSの設定ファイルに登録することで他のTailwind CSSのutility classと同様の方法で利用することができます。

なぜTailwind CSS？

ここまでを読んでTailwind CSSを利用しなくてもstyle属性を利用して記述していけばいいのではと疑問を持った人もいるかと思います。Tailwind CSSを利用することでstyle属性にはない利点があります。

Tailwind CSSを使うとResposiveなデザインもutility classで簡単に設定することができるためmedia queryを設定する必要がありません。Tailwind CSSに慣れるとmedia queryの使い方を忘れるでしょう。また擬似クラスであるhoverやfocusといった設定はstyle属性で設定することはできませんがTailwind CSSではutilify classで擬似クラスを設定することができます。さらにCSSを利用したアニメーションやグラデーションカラーの設定もutility classを使って設定が可能です。

環境の構築

Tailwind CSSを使用するためには、cdnを使うかnpmまたはyarnでインストールをして行う方法があります。まずTailwind CSSがどのようなものか体験したいのであればcdnを使ってお手軽に動作確認を行うのが一番簡単です。

cdnを利用した方法

cdnを利用する場合は、下記のlinkタグをhtmlに貼り付けてください。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
//V3
<script src="https://cdn.tailwindcss.com"></script>

npmを使ったTailwind CSSのインストール

npmコマンドを利用するためには動作を行う環境にNode.jsをインストールしておく必要があります。ここではWindow10環境で動作確認を行っています。

npmコマンドを利用してTailwind CSSのインストールを行うのでReact, Vueなどのフレームワークを利用することが必須だと考えてしまうかもしれませんが通常のhtmlファイルのみでも利用することができます。Tailwind CSSのV3.0を利用しています。

本格的にアプリケーションを開発する場合は利用するフレームワークによってインストール方法が異なるので各フレームワーク用のインストール手順を参考にインストールすることになります。

npmコマンドを使ってTailwindのインストールを行うためにpackage.jsonファイルを作成します。任意のディレクトリ(プロジェクトディレクトリ)を作成してnpm init -yコマンドを実行してください。

 $ npm init -y

実行したディレクトリ上にpackage.jsonファイルが作成されていることを確認し、Tailwind CSSのインストールを行います。

 $ npm install -D tailwindcss

Tailwind CSSの設定ファイルを作成するためにnpx tailwindcss initコマンドを実行します。

 $ npx tailwindcss init

コマンドを実行するとディレクトリの中にtailwind.config.jsという名前の設定ファイルが作成されます。プロジェクトディレクトリのsrcフォルダ内にhtmlファイルを作成するために以下の設定を行います。

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

次にsrcディレクトリを作成し、その中にinput.cssファイルを作成します。input.cssファイルには以下の3つのtailwindディレクティブを追加します。このinput.cssはhtmlから直接読み込むことはしません。そのため、後ほどビルドを行いhtmlが読み込める形の見慣れたcssファイルに変換します。

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

実際にビルドを行い、Tailwindのディレクティブを追加したinput.cssファイルからhtmlから読み込むためのoutput.cssファイルを作成してみましょう。実行するとdistディレクトリの下にoutput.cssという名前のファイルが作成されます。–watchオプションをつけているので後ほど作成するindex.htmlを更新すると自動でリビルドが行われます。

$ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

作成されるcssファイルには通常のCSSが記述されていることが確認できます。

/*
! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

Tailwind CSSを利用できる環境が整ったのでsrcディレクトリの下にindex.htmlファイルを作成してください。index.htmlファイルの中ではdist/output.cssファイルを読み込んでいます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-blue-900">Hello world!</h1>
  </body>
</html>

保存してoutput.cssファイルを確認してください。ファイルの下部に利用しているutility classを確認することができます。

//略
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
}

.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

ブラウザを確認するとTailwind CSSが適用されたHello worldを確認することができます。

–minifyを利用することで作成されるoutput.cssファイルを圧縮することができます。

 % npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch --minify

npmコマンドを利用してTailwind CSSが使用できる環境構築は完了です。

Tailwind CSSの使い方

冒頭で説明したutility classの言葉だけの説明では理解は難しいかもしれません。使用頻度の高い文字の大きさ、文字の色、文字の太さのutility classを確認していくことでutility classというもの慣れていきます。

Hello Tailwind CSSを表示

Tailwindを使う環境の構築ができたので、publicディレクトリに以下のindex.htmlファイルを作成します。linkタグでビルド後のstyle.cssを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello Tailwind CSS</h1>
</body>
</html>

ブラウザで確認するとTailwindの文字列が表示されます。

utility classを使用して、文字を装飾します。文字の大きさ、色、位置、太さの4つのutility classを設定します。

<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>

ブラウザで確認すると下記のように表示されればTailwind CSSの設定は問題なく行われています。

ここからは頻繁に利用するでろうutility classの確認を行っていきます。

文字の大きさ設定

文字の大きさを設定する場合はfont-{大きさ}で設定を行います。大きさには13つの値を取ることができます。()内は対応するCSSスタイル。

実際にhtmlに適用すると下記のようになります。

<div class="text-center mt-10">
    <p class="text-xs">fontの大きさ</p>
    <p class="text-sm">fontの大きさ</p>
    <p class="text-base">fontの大きさ</p>
    <p class="text-lg">fontの大きさ</p>
    <p class="text-xl">fontの大きさ</p>
    <p class="text-2xl">fontの大きさ</p>
    <p class="text-3xl">fontの大きさ</p>
    <p class="text-4xl">fontの大きさ</p>
    <p class="text-5xl">fontの大きさ</p>
    <p class="text-6xl">fontの大きさ</p>
</div>

文字の太さ設定

文字の太さを設定する場合はfont-{太さ}で設定を行います。太さには9つの値を取ることができます。()内は対応するCSSのスタイル。

実際にhtmlに適用してどのような違いがあるか確認します。

<div class="text-center mt-10">
    <p class="font-thin">fontの太さ</p>
    <p class="font-extralight">fontの太さ</p>
    <p class="font-light">fontの太さ</p>
    <p class="font-normal">fontの太さ</p>
    <p class="font-medium">fontの太さ</p>
    <p class="font-semibold">fontの太さ</p>
    <p class="font-bold">fontの太さ</p>
    <p class="font-extrabold">fontの太さ</p>
    <p class="font-black">fontの太さ</p>
</div>

文字の色設定

文字の色を設定する場合は、text-{色}-{色の濃さ}で設定を行います。色にはwhite, black, red, blue, indigo…などを設定することができます。色の濃さは9つの値を取ることができます。例えばgreenの場合は下記のようになります。

<div class="text-center mt-10">
    <p class="text-green-100">fontの色</p>
    <p class="text-green-200">fontの色</p>
    <p class="text-green-300">fontの色</p>
    <p class="text-green-400">fontの色</p>
    <p class="text-green-500">fontの色</p>
    <p class="text-green-600">fontの色</p>
    <p class="text-green-700">fontの色</p>
    <p class="text-green-800">fontの色</p>
    <p class="text-green-900">fontの色</p>
</div>

marginやpadding, flexboxなどのutility classも準備されています。各utility classについては公式ドキュメントで確認することができます。

ボタンの作成

utility classというものがどのようなものかわかってきたと思いますので、次はutility classを利用してボタンを作成します。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>

ブラウザで確認するとボタンが作成できていることがわかります。

py-2では上下に.5remのpadding、px-4では左右に1remのpaddingを設定しています。rountedでborder-radiusの.25remが適用され角が丸みをつけています。

Tailwind CSSのカスタマイズ

ボタンは再利用する可能性が非常に高くアプリケーショ内でデザインを統一したいコンポーネントなのでボタンを作成するために設定したutility classを別のclassとして登録することもできます。

ビルド前のcss/style.cssファイルを開いて@componentsと@utilityディレクティブの間に下記を追加します。

@tailwind base;

@tailwind components;

.btn{
    @apply font-semibold text-white py-2 px-4 rounded;
}

@tailwind utilities;

追加後はbuildを実行します。

$ npm run build

public/css/style.cssが上書きされるので、style.cssファイルを開いてbtnを検索してください。

先程@applyで追加した内容がcssとしてstyle.cssファイルに追加されていることを確認することができます。

.btn{
  font-weight: 600;
  color: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
}

背景色だけ赤に変更したボタンを追加したbtnクラスを使って作成します。

<div class="text-center mt-10">
    <button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>
    <button class="bg-red-700 btn">ボタン</button>
</div>

追加したクラスbtnを使って背景が赤のボタンが作成できることが確認できます。

疑似クラスの設定hover

ボタンの上にカーソルが通った時にボタンの色を変更するためのhoverを通してTailwindでの擬似クラスの方法を確認します。色を変更したい場合はhoverの後にカラーの設定を行うと設定が反映されます。

<button class="bg-red-700 btn hover:bg-red-500">ボタン</button>

カーソルがボタンの上を通ると色が薄く表示されるのが確認できます。右側のボタンの色が薄くなっています。

疑似クラスの設定focus

ボタンをクリックした時のfocusの設定も行います。わかりやすいようにボタンの丸みを強調するためroundedからrounded-fullに変更します。

.btn{
    @apply font-semibold text-white py-2 px-4 rounded-full;
}

css/stylc.cssを更新したら必ずビルドを行ってください。

ボタンを選択(タブを使う)すると四角の枠が表示されます。クリック時にも同様に四角の枠がでるので四角の枠を消すためにfocusを設定します。

focusにoutline-noneを設定すると枠は消えますが、ボタンが選択されているかどうかがわかりません。

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none">ボタン</button>

ボタンが選択されていることがわかるようにshadow-outlineを設定します。設定を行うとボタンに沿って影ができるのでユーザにも違和感がなくなります。

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none focus:shadow-outline">ボタン</button>

Transitionの設定

擬似クラスのhoverを設定することでカーソルがボタンの上に通った時にボタンを色が変更できることを確認しました。カーソルがボタンの上に乗った瞬間に色がわかります。transitionを利用することでゆっくりとボタンの色を変えることができます。下記ではduration-1000を設定することで1秒かけてゆっくりと色が変わります。durationの値はduration-75からduration-1000まで複数登録されています。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded hover:bg-red-700 duration-1000">ボタン</button>

Transformの設定

hoverでボタンの色が変わるだけでなくボタン自体を大きくしたい場合はtransformとscalingのutility classを利用して実現することができます。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded transform hover:scale-110 hover:bg-red-700 duration-1000">ボタン</button>

Groupの設定

ここまでのhoverの設定では設定を行なった要素の上にカーソルが通るとhoverで設定した変化が要素に起こりましたがgroup設定では親要素の上にカーソルが通ると子要素に設定したhoverの設定を反映させることができます。

下記の例ではgroupを設定した親要素にカーソルが通ると子要素に設定したhover設定により1つのpタグ要素は文字色が赤になり、もう一つは青になるという設定を行っています。

<div class="group m-10 p-10 border hover:bg-gray-100">
  <p class="font-black group-hover:text-red-900">New Project</p>
  <p class="font-black group-hover:text-blue-900">Next Project</p>
</div>

親要素の上にカーソルが置かれていない初期の状態です。

カーソルを親要素に置くと親要素自体に設定したhoverの設定だけではなく子要素に設定したhoverの設定も反映されます。Groupの設定によって個別要素のhoverだけではなく一つの要素のかたまりに対してhoverの設定を行うことができます。

アニメーションの設定

animate-bounce, animate-pulseをclassに設定するだけで複雑なCSSを設定することなくアニメーションを簡単に設定することができます。

tailwind.confing.js 設定ファイル

設定ファイルの作成

Tailwind CSSではTailwind CSSのutility classに含まれていないカラーの追加やmargin, widthの追加などカスタマイズを行うことができます。カスタマイズを行うためには設定ファイルが必要になりますが、デフォルトでは作成されていないためコマンドを使って作成します。

 % npx tailwind init
  
   tailwindcss 2.1.2
  
   ✅ Created Tailwind config file: tailwind.config.js

上記コマンドにより、tailwind.config.jsファイルが作成されます。

カラーの追加

Tailwind CSSに登録されているカラー以外のカラーを追加してみましょう。

作成したtailwind.config.jsファイルを開いてシアンカラーを追加します。cyanとしていますが任意の名前をつけることは可能です。

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: '#9cdbff',
      }
    }
  },
  variants: {},
  plugins: []
}

追加後、ビルドを行います。

 $ npm run build

ボタンのカラーをredからcyanに変更します。cyanを追加した際に色の濃さを設定していないので、bg-cyan(bg-red-700からbg-cyanに変更)と設定します。

<button class="bg-cyan btn hover:bg-red-500 focus:outline-none focus:shadow-outline">ボタン</button>

max-widthの追加とspacingの追加

ブラウザ上の要素の横幅の最大値をmax-widthで設定することができますが、Tailwind CSSにデフォルトで登録されている幅とは異なる幅に設定したい場合があります。その場合はカラーと同様にtailwind.config.jsで追加設定を行います。

theme: {
    extend: {
        colors:{
            'cyan':'#9cdbff',
        },
        maxWidth:{
            custom:'60rem',
        },
    },
    variants: {},
    plugins: []
},

class属性で利用する場合はmax-w-customと設定を行います。

widthの設定はspacingを使って設定を行うことができます。

theme: {
    extend: {
        colors:{
            'cyan':'#9cdbff',
        },
        maxWidth:{
            custom:'60rem',
        },
        spacing:{
            76: '19rem',
        },
    },
    variants: {},
    plugins: []
},

class属性で利用する場合はw-76と設定を行います。

フォントサイズの追加

フォントサイズの最小値のclassはtext-xsですがさらに小さいフォントサイズのclassを追加したい場合は下記のように行うことができます。

theme: {
    extend: {
        colors:{
            'cyan':'#9cdbff',
        },
        maxWidth:{
            custom:'60rem',
        },
        spacing:{
            76: '19rem',
        },
        fontSize:{
            xxs:['0.625em',{lineHeight:'1rem'}],
        },
    },
    variants: {},
    plugins: []
},

利用したい場合はclass属性でtext-xxsと設定を行います。

その他の値のカスタマイズ方法

カラー、max-witdth, width, フォントサイズの追加方法について説明を行ってきましたが例えばBox Shadowを追加したいといった場合にどこで設定方法を確認すればいいのでしょうか。

まずTailwind CSSの公式ドキュメントにいって検索を行います。

検索するとBox Shadowのページが表示されます。

スクロールしていくとCustomizingがあります。そこにはTailwind CSSにデフォルトで登録されている値が表示されているのでそこに含まれない値で設定を行いたい場合は表示されている設定方法をもとにtailwind.config.jsファイルに追加してください。

Tailwind CSSのプラグインの設定

Tailwind CSSでは公式のプラグインがいくつか提供されています。その中のプラグインの1つであるtailwindcss/line-clampの設定方法を確認していきます。

下記のような長い文章をブラウザ上に表示する場合、ブラウザ上でも複数行に渡って表示されます。

<div class="m-20">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem necessitatibus et laborum, minus amet aliquid pariatur fugit recusandae neque illum voluptatibus repellendus est natus harum modi maxime eos aliquam eum ratione tempore? Sapiente nam corrupti odio quibusdam dolore harum consequatur sint mollitia at? Voluptas quae eligendi quia omnis porro totam laudantium dolorum. Ipsum quasi cupiditate expedita! Dolor ut voluptatibus quos ipsa beatae, accusamus, a incidunt provident, delectus tempore id ex placeat quo laboriosam iusto velit animi molestiae dignissimos sint perspiciatis quis accusantium maxime corrupti. Repellat hic error in totam consequuntur non magni maiores quibusdam quidem cum.
  </div>
</div>

すべての行を表示させるのではなく先頭の数行だけ表示させたいという要望がある場合にプラグインのtailwindcss/line-clampを利用することができます。

プラグインを利用するためにはパッケージのインストールが必要になります。

 % npm install @tailwindcss/line-clamp

インストール後はtailwind.config.jsにインストールしたパッケージの情報を登録する必要があります。

    plugins: [
        require('@tailwindcss/line-clamp'),
    ],

設定を行なったあとはビルドが必要になります。npm run buildを実行します。ビルドが終了するとプラグインを利用するための設定は完了です。

line-clampは下記のようにline-clampの後ろに表示させたい行数を設定します。

<div class="m-20">
  <div class="line-clamp-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem 
//略
  </div>
</div>

line-clamp-3を設定しているの3行のみ表示させることができます。

ここまででTailwindのutility classの設定方法を確認しました。しかし、これだけではTailwindでウェブサイトを作成することはできません。次回はナビゲーションバーを作成することでFlexbox, ブレイクポイント、レスポンシブデザインの設定方法について説明を行っていきます。