【CSS】「TailwindCSS」について

TailwindCSSとは？

Utility Firstという概念で設計されたCSSフレームワークです。また、モバイルファーストで作ることが推奨されています。（スマホサイトを作ってから、タブレットやPCのコーディングをしていくコーディング手法）

メリット

• 単純にCSSの記述量を大幅に削減できる。
• スタイリングの際に考えるCSSクラス名を考える必要がなくなる。
• 「xxx.modules.css」が不要になる。
• 本番環境では未使用のclassを自動削除してくれるのでパフォーマンスも良くなる。

リリースノート

バージョン	リリース月	説明
1.0	2019年5月
2.0	2020年11月
2.1	2021年4月	Just In Timeモード追加
3.0	2021年12月	・JITが標準になった。（今までは「mode="jit"」と指定が必要だった。） ・JITが標準になったこともあり、自動でpurgeしてくれるのでそもそもpurgeがなくなった。 ・追加設定なしで全ての色を使うことができる。 ・色の後に「/50」などと指定すると透明度の設定もできる。 ・box-shadowにも色がつけることができるようになった。 ・下線の装飾も増えている。 ・w-[5px]、y-[5px]など任意の値を設定できるようになった。（バージョン2までは4の倍数しか設定できなかった。） ・アスペクト比を標準クラスで設定できるようになった。 ・スムーズスクロールが簡単に実装できるようになった。（aタグクリックなど） ・印刷対象外フィールドの設定が可能になった。（例えば、ヘッダーやフッターなど）

Bootstrapとの違い

柔軟性がある。

デザインが少し変わるなどの要件変更に強いです。ただ、その分Bootstrapよりは記述量が多くなり可読性が低くなりますが。

JavaScriptに依存していない。

例えば、モーダルの開閉の状態などはReactやVueなどのフレームワーク側で管理したいのですが、Bootstrapはライブラリの中にJSを持ってしまっていてその中で状態を保持していたりするので、競合したりします。tailwindはそういうことはないです。

Utility Class

CSSプロパティで、それぞれに対応したcssクラスを適用することでスタイリングを行います。

インストール

設定ファイル作成

設定例

thema

TailwindのデフォルトのCSS設定を帰ることができます。themaでCSS定義を変更することでプロジェクト内のスタイルが統一されます。

purge

TailwindCSSはそのままビルドすると使用していない大量のUtility Classが含まれてしまいファイルサイズが大きくなりすぎてWebページのパフォーマンスが低下する。purgeを指定することでそれらのファイルに含まれているUtility Classのみをビルドする設定にすることができる。

VSCodeプラグイン

Tailwind CSS IntelliSense

Tailwindの入力補助プラグインです。Tailwind CSS独自の宣言（@apply、@layerなど）のハイライトも行えます。

Tailwindを楽に使うためのパッケージ、サンプル集

Headless UI

Tailwind.cssが開発元で作っているTailwindcssとうまく合うように作られたUIコンポーネント。

例

モーダル

tailblocks

Tailwindで作られたレイアウト集です。画面の上側で画面の横幅を変えて閲覧することもできますし、ダークモードにすることなども可能です。

Tailwind Templates

Alerts、Button、Cardなど色々揃ってます。

TAILWIND STARTER KIT

TailwindだけでなくReactやVue.jsと組み合わせたコンポーネントで提供されていたりします。

Tailwind UI

こちらのサイトは基本的に有料になります。（鍵がついているものが有料です。）、仮にお金を払わなくても画像としてレイアウトを見ることができるのでこういうのを参考にしてデザインを作るというのはありです。