初心者向けにTailwind CSSの導入方法や使い方を紹介

Tailwind CSSはCSSフレームワークの一種で高速なコンポーネント構築が可能になります。

2021年の12月にv3.0がリリースされパフォーマンスの向上、大幅なワークフローの改善、そして新機能の追加などますます使い勝手が良くなりました。

リリースノートの詳細は公式サイトで詳しく解説されています。

今回はそんなTailwind CSSの導入方法や使い方を初心者向けに紹介していきたいと思います。

Tailwind CSSの導入方法

導入方法は２通りあり、「CDNから読み込む」方法と「Postcss使ってTailwindcssを使ったCSSをビルドする」方法が存在します。

軽量にするためには「Postcss使ってTailwindcssを使ったCSSをビルドする」方法がおすすめですが、node.jsが必要だったりpackage.jsonの編集が必要だったりと初心者には少し難しい内容となります。

今回は初心者向けの解説ということで「CDNから読み込む」方法を紹介します。

CDNから読み込むために以下のコードをHTMLファイルのheadタグに追加してください。

<script src="https://cdn.tailwindcss.com"></script>

Tailwind CSSはCSSを記述する必要がなく、フレームワークであらかじめ用意されたクラスをHTMLに適用します。

「高さを指定するクラス」や「背景色を指定するクラス」が個別に用意されているため必要に応じてクラスを追加していきましょう。

クラスを何も指定しない場合は以下の例の２つ目のように文字列だけの表示となります。

基本的に「１クラス１スタイル」となっています。

たとえば高さを指定する場合は「h-〇〇」、幅を指定する場合は「w-〇〇」、背景色を指定する場合は「bg-〇〇」のように記述します。

CSSプロパティの頭文字を取っているので連想しやすいかと思います。

たとえば先ほどの例のボタンでテキストカラーを変えたい場合は「text-〇〇」、影をつけたい場合は「shadow-〇〇」を追加しましょう。

実際に使ってみるとCSSの作成やクラス名の命名が不要であるのは非常に便利でした。

チーム開発をしているとクラス名が被らないよう命名規則を考える必要があり、開発規模が大きくなるほどクラス名が被りやすくなるので、クラス名が被る心配をしなくていいのはメリットだと思いました。

また、共通のCSSファイルを使用していると一方のスタイルだけ修正したい場合の手間が面倒だったりしたのですが、Tailwind CSSではクラス名を足したり引いたりするだけでよいので保守性の面でも優れていると感じました。

反面、複雑なスタイルになるほどクラス名の記述が増え結果的にHTMLファイルがごちゃっとした見た目になってしまい、たとえばbuttonタグに記述したonclick関数が見つけづらかったりするのはデメリットに感じました。
（慣れの問題だとは思いますが。。）

Tailwind CSSのようなCSSフレームワークはチーム開発において非常に力を発揮します。

クラス名がたくさんあるので慣れには時間が必要ですが、使いこなせるとおしゃれなデザインが簡単に実現できるので是非試してみてください。