『Tailwind CSS入門』をリリースしました

さまざまな議論がありつつも、広く使われているCSSフレームワーク、Tailwind CSSのレッスンをリリースしました。Reactなどと組み合わせて活用している現場も多いですよね。

CSSの基礎知識が必要ですが、基本的な使い方をざっとまとめてみたので、興味がある方は是非チェックしてみてください。

Tailwind CSS入門 (全14回) - プログラミングならドットインストール

Tailwind CSSとは？

Bootstrapなどと同じく、CSSを1行もかかずに要素のスタイリングをしていくことができるCSSフレームワークです。

ただ、Bootstrapがコンポーネント単位でスタイルをつけていくことが多いのに対し、Tailwind CSSでは汎用的に使える、ユーティリティ的な小さなスタイルを以下のように組みあわせていきます。

<button class="text-white bg-sky-400 rounded px-4 py-2">
  OK
</button>

ただ、そうなると当然、HTMLに書くスタイルがずらずらと長くなってくるので、「これ、本当に便利なの…？」と思ったりもしますが、「クラスを考えたりしながらCSSを書くほうが面倒」「コンポーネント単位のスタイルよりも、ユーティリティ的なスタイルのほうが使い勝手が良い」という層には人気ですね。

特にデザインの細部にはこだわらずに、ささっとプロトタイプを作りたい、といったシーンで活用されている印象があるので、知っておいても損はないかもしれません。

今回のレッスンは全14回にまとめてみました。ブラウザとVS Codeエディタを使って、手を動かしながら学んでいきます。詳細は以下からご確認ください。

Tailwind CSS入門 (全14回) - プログラミングならドットインストール

今後の予定

React、TypeScript、Tailwind CSSと続いたので、次はいよいよNext.jsに取り掛かっていく予定です。フルスタックのフレームワークなので、いくつかのレッスンに分割していくことになります。少しお時間をいただくことになるので、もうしばらくお待ちいただければと思います。