初めてでもわかるTailwindcss入門(1)基礎編
本文書は、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は上限のｐpadding、roundedは角の丸みを設定を行っています。
ここで設定しているutility classはclass自体が特定の意味を持っておらず(btnではボタンという意味を持っている)、さまざまな場所で利用することができるためutility class(ユーティリティクラス)といった名前がついています。
文字の大きさでも9種類、色の数ではかなりの数のutility classが準備されているのでcssのスタイルを独自に記述することなくhtmlファイルのみを更新することでデザインを行うことができます。
環境の構築
Tailwindを使用するためには、cdnを使うかnpmかyarnでインストールをして行う方法があります。
cdnを利用した方法
cdnを利用する場合は、下記のlinkタグをhtmlに貼り付けてください。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
npmを使ったTailwindcssのインストール
cdnではTailwindのカスタマイズを行うことができません。カスタマイズを行いたい場合は、npm, yarnでtailwindcssをインストールする必要があります。
npmコマンドを使ってTailwindのインストールを行うためにpackage.jsonファイルを作成します。
$ npm init -y
実行したディレクトリ上にpackage.jsonファイルが作成されていることを確認し、Tailwindのインストールを行います。
$ npm install tailwindcss
次に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;
}
}
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の文字列が表示されます。
utility classを使用して、文字を装飾します。文字の大きさ、色、位置、太さの4つのutility classを設定します。
<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>
ブラウザで確認すると下記のように表示されます。
文字の大きさ設定
文字の大きさを設定する場合は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;)
<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>
カーソルがボタンの上を通ると色が薄く表示されるのが確認できます。右側のボタンの色が薄くなっています。
疑似クラスの設定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>
設定ファイル
設定ファイルの作成
カラーの追加や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を設定します。
<button class="bg-cyan btn hover:bg-red-500 focus:outline-none focus:shadow-outline">ボタン</button>
ここまででTailwindのutility classの設定方法を確認しました。しかし、これだけではTailwindでウェブサイトを作成することはできません。次回はナビゲーションバーを作成することでFlexbox, ブレイクポイント、レスポンシブデザインの設定方法について説明を行っていきます。
