とあるプロジェクトにてTailwind CSSというものを扱う必要が出てきました。
というわけで私自身が習得するためにメモとして残します。
目次
Tailwind CSSてなに
Tailwind CSSはいま流行りのCSSフレームワークです。
CSSフレームワークというと私の場合は真っ先にBootstrapを思い浮かべるのですが、Tailwind CSSが勢力を伸ばしているみたいですね。
PHPのフレームワーク「Laravel」でもバージョン8からはTailwindを標準採用するなど結構トレンドなフレームワークとなっています。
Tailwind CSSの公式サイトはコチラ。
Tailwind CSSの特徴
Tailwind CSSの一番の特徴は自前のスタイルシートを書く必要がない、という所でしょうか。
Tailwind CSSがあらかじめ多くのスタイルをラッピングしてCSSのクラスとして定義しています。
使う側はスタイルシートを書かずにHTML側にこのクラス名を記述するだけでデザインすることができます。
たとえばフォントサイズを指定するとしましょう。
/* Tailwindなしの場合。はスタイルシートを記述する。 */
.sample {
font-size: 20px;
line-height: 120%;
}<!-- Tailwindなしの場合。HTMLにスタイルシートで記述したクラスを使用。 -->
<body>
<p class="sample">Sample is best.</p>
</body>通常はこんなかんじでスタイルシートを作成して、HTML側で定義したスタイルを使う形になります。
これがTailwindを使う場合はスタイルシートを書く必要がなくなります。
<!-- Tailwind使った場合。HTMLにクラス指定するだけで終わり。 -->
<body>
<p class="text-lg">Sample is best.</p>
</body>これだけで済みます。
ちなみに「text-lg」クラスはTailwindでは次のスタイルで定義されています。
/* Tailwindのtext-lgクラス */
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}こういった感じであらかじめ作られたクラスをHTMLで指定するだけで簡単にデザインしていくことができます。
Tailwindで定義されたクラスはすごく多く、公式ドキュメントのページで確認できます。
レスポンシブ対応も簡単
Tailwindではレスポンシブ対応も簡単に設定できます。
画面の横幅サイズが小さいほうからsm、md、lg、xl、2xlの5段階であらかじめTailwindで定義されています。
これをクラスと同時に指定することで自動的に幅によって対象のスタイルが切り替わって使われるようになります。
指定したクラスは定義したサイズ以上の場合に適用されます。
たとえばブラウザの幅によってテキストの大きさを変えたい場合は次のようにクラスの前にサイズを指定します。
<p class="text-md lg:text-lg xl:text-xl">幅によってテキストの大きさを変えます。</p>これは通常サイズがtext-mdで、横幅がlgのサイズ（1024px）以上になったらtext-lgが、xlのサイズ（1280px）以上のサイズになったらtext-xlが使われることになります。
デフォルトでは次のようにレスポンシブのサイズが指定されています。
| サイズ指定 | 最小幅 | CSS |
| sm | 640px | @media (min-width: 640px) { … } |
| md | 768px | @media (min-width: 768px) { … } |
| lg | 1024px | @media (min-width: 1024px) { … } |
| xl | 1280px | @media (min-width: 1280px) { … } |
| 2xl | 1536px | @media (min-width: 1536px) { … } |
Tailwind CSSを使うためにはnpmによるビルドが必要
Tailwindは基本的にnpmでビルドして使う形をとります。
CDN（ネット上にあるcssファイルをそのまま指定する）でも使うことはできるのですが、
- すべてのクラスが出力されているので容量が多い
- カスタマイズできない
ということがあるため本来のTailwindのメリットを生かせません。
ビルドすることで次のようなことが可能になります。
- 不要なクラスの出力を制限できる
- Tailwindのクラスを使用して独自クラスを作成できる
- カスタマイズできる。
特に3つ目のカスタマイズはデザインの自由度がをかなり広げることができるでしょう。
既存のTailwindクラスを上書くこともできるし、独自のTailwindクラスを定義することもできます。
これについては公式のConfigurationあたりに載っていることで実現できます。
https://tailwindcss.com/docs/configuration
そのままTailwindのクラスを使うとHTMLがクラスだらけになる
Tailwind本家が推奨する使い方はHTMLに直接Tailwindのクラスを追加していくというもの。
たしかにその場でデザインしていく分には非常に調整しやすいです。
でも画面が増えていくとやっぱり管理しづらくなります。
同じレイアウトが数多くある時にそのデザインに微調整が入ったら・・・全て直していく必要があって手間ですよね。
そもそもCSSのコンセプトって「論理構造（HTML）とデザインの分離」がメインだったはずです。
これについてはTailwindが推奨する書き方はこれに逆行しているように思います。
Tailwind CSSのクラスだけでなく独自クラスも併用するのがいい
HTMLがTailwindのクラスだらけになってしまうと、ゴチャゴチャしてきてわかりにくくなります。
というわけで、この際Tailwindが推奨する使い方は無視しましょう（笑）
普通のCSSと同じ感じで独自クラスを作ればいいんです。
ただそのCSSの中身はTailwindのクラスを定義します。
.dokuji-no-class {
@apply border-1 border-blue-400 text-xl p-2 m-2;
line-height: 150%;
}@applyを使うことでTailwindのクラスをクラス定義に使うことができます。
普通のスタイルシートの定義も混在させることもできます。
Tailwindのクラスを使えることで自分でスタイルをひとつひとつ定義していくよりはかなり楽になります。
基本的にこの独自のクラスを使用して、少しだけイレギュラーなデザインの部分だけHTMLにTailwindのクラスを直接書く、というのがいいと思います。
まとめ
Tailwind CSSは最近はやりのCSSフレームワークです。
自分で独自のスタイルを定義する必要がなくHTMLにTailwindのクラスを指定するだけでレイアウトが可能になるという点では取っつきやすいといえます。
ただ、Tailwind本家が推奨する使い方（HTMLに直接クラスを追記していく形）ではHTMLがクラスだらけになるという欠点があります。
その解決策は自分で独自クラスを作るということになるでしょう。
- CSS側はTailwindを使用したものを独自クラスとして定義する。
- HTML上は今までのスタイルシートと同じ感じで自分で作った独自クラスで書いていく。
- 少しイレギュラーなデザインがある場合はHTMLにTailwindのクラスを直接書く。
こんな感じで臨機応変に作ればいいんじゃないでしょうか。
いずれにせよ実際に広まっているという現実があってインターネット上にも情報が豊富にあるのでまずは使ってみる価値はあるといえます。