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

Tailwindとは

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

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

どちらもメリットとデメリットがあるのでどちらを使うかは個人の判断になります。

utility classとは

例えばBootstrapでボタンを作成する場合はclassにはbtnを設定することになります。しかし、Tailwindではボタンを表すようなbtnといったclassは存在せず下記のようにutility class記述することでボタンを作成することができます。


<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は上限のppadding、roundedは角の丸みを設定を行っています。

ボタンを作成
ボタンを作成

ここで設定しているutility classはclass自体が特定の意味を持っておらず(btnではボタンという意味を持っている)、さまざまな場所で利用することができるためutility class(ユーティリティクラス)といった名前がついています。

Tailwindのutility classを説明をする場合に英語ではlow levell styling, low level utility class, low level frameworkといったようにlow levelという言葉を使って表現しています。

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

2回目の文書ではナビゲーションバーをindexh.htmlのみ使って記述します。CSSファイルだけではなくstyleタグを使ってCSSを記述することは全くありません。

環境の構築

Tailwindを使用するためには、cdnを使うかnpmかyarnでインストールをして行う方法があります。

cdnを利用した方法

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


<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
cdnを使用した場合は本文書で後ほど紹介するTailwindへのカラーの追加等のカスタマイズができないので注意してください。

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

cdnではTailwindのカスタマイズを行うことができません。カスタマイズを行いたい場合は、npm, yarnでtailwindcssをインストールする必要があります。

npmコマンドを使ってTailwindのインストールを行うためにpackage.jsonファイルを作成します。


 $ npm init -y

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


 $ npm install tailwindcss
パッケージの名前はtailwindではないので注意してください。

次にcssディレクトリを作成し、その中にstyle.cssファイルを作成します。style.cssファイルには以下の3つのtailwindディレクティブを追加します。このstyle.cssはhtmlから直接読み込むことはできません。そのため、後ほどビルドを行いhtmlが読み込める形の見慣れたcssファイルに変換します。ビルドすることでbase, comonents, utilitiesからTailwindcssで利用するutility classが取り出されます。


@tailwind base;

@tailwind components;

@tailwind utilities;

ビルド後に作成されるcssファイルを保存するpublic/cssディレクトリを作成します。

実際にビルドを行い、Tailwindのディレクティブを追加したstyle.cssファイルからhtmlから読み込むためのcssファイルを作成してみましょう。


$ npx tailwind build ./css/style.css -o ./public/css/style.css

   tailwindcss 1.1.3

   🚀 Building... css/style.css

   ✅ Finished in 1.28 s
   📦 Size: 862.11KB
   💾 Saved to public/css/style.css

作成されるcssファイルには通常のCSSが記述されていることが確認できます。Twailwindで事前に作成されているutility classがすべて記述されているのでファイルサイズは大きく、5万行以上の行数です。


/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
作成されるstyle.cssファイルの上部にはnormalize.cssが適用されていることも確認することができます。

npxコマンドを使用してビルドを行いましたが、package.jsonファイルにbuildコマンドを追加しておきます。


"scripts": {
  "build": "tailwind build css/style.css -o public/css/style.css"
},

これでTailwindを使用できる環境構築は完了です。

Tailwindの使い方

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

Hello Tailwindを表示

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</h1>
</body>
</html>

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

Hello Tailwind表示
Hello Tailwind表示

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


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

ブラウザで確認すると下記のように表示されます。

utility class適用後
utility class適用後

文字の大きさ設定

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

  • .text-xs (font-size:.75rem;)
  • .text-sm (font-size:.875rem;)
  • .text-base (font-size:1rem;)
  • .text-lg (font-size:1.125rem;)
  • .text-xl (font-size:1.25rem;)
  • .text-2xl (font-size:1.5rem;)
  • .text-3xl (font-size:1.875rem;)
  • .text-4xl (font-size:2.25rem;)
  • .text-5xl (font-size:3rem;)
  • .text-6xl (font-size:4rem;)

実際に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のスタイル。

  • .font-hairline (font-weight:100;)
  • .font-thin (font-weight:200;)
  • .font-light (font-weight:300;)
  • .font-normal (font-weight:400;)
  • .font-medium (font-weight:500;)
  • .font-semibold (font-weight:600;)
  • .font-bold (font-weight:700;)
  • .font-extrabold (font-weight:800;)
  • .font-black (font-weight:900;)

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


<div class="text-center mt-10">
    <p class="font-hairline">fontの太さ</p>
    <p class="font-thin">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の場合は下記のようになります。

  • text-green-100 (color: #f0fff4;)
  • text-green-200 (color: #c6f6d5;)
  • text-green-300 (color: #9ae6b4;)
  • text-green-400 (color: #68d391;)
  • text-green-500 (color: #48bb78;)
  • text-green-600 (color: #38a169;)
  • text-green-700 (color: #2f855a;)
  • text-green-800 (color: #276749;)
  • text-green-900 (color: #22543d;)
文字の色をgreenではなくredに変更したい場合は、text-red-500のように変更可能です。また背景色を変更したい場合は、bg-red-500で設定することができます。

<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のカスタマイズ

ボタンは再利用する可能性が非常に高いコンポーネントなのでボタンを作成するために設定した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>

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

hoverを設定
hoverを設定

疑似クラスの設定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>
focus:shadow-outlineを設定
focus:shadow-outlineを設定

設定ファイル

設定ファイルの作成

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


 $ npx tailwind init
  
   tailwindcss 1.1.3
  
   ✅ Created Tailwind config file: tailwind.config.js

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

カラーの追加

tailwindが準備している色以外を追加してみましょう。

作成したtailwind.config.jsファイルを開いてシアンカラーを追加します。


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

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


 $ npm run build

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

設定ファイルに追加した色が追加されているか確認したい場合は、ビルド後に作成されるpublic/css/style.cssに追加した色があるかを検索してください。

<button class="bg-cyan btn hover:bg-red-500 focus:outline-none focus:shadow-outline">ボタン</button>
追加したシアンでボタンを作成
追加したシアンでボタンを作成

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