はじめに
今回約２年ぶりに、Tailwind cssを触ってみた感想と
困ったことだったり便利だったりしたことを書いていきます。
改めて使ってみようと思った理由としては、自身が参画してないプロジェクトでTailwind cssを使用しており、良い評判を聞くからです。
Tailwind cssとは？
Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。これは、低レベルのユーティリティクラスを提供し、それらを組み合わせて任意のデザインを構築できるようにすることを目的としています。基本的に、Tailwind CSSは多くの小さな、再利用可能なクラスを提供し、開発者がHTMLに直接それらを適用することで迅速にスタイリングを行うことができる（Gptより
bootstrapみたいなcssのフレームワークということです
以下ざっくり説明
Tailwind無しでの書き方
<div class="div-style">
hello
</div>
.div-style {
background-color: #4299e1; /* Tailwindの 'bg-blue-500' に相当 */
color: white; /* Tailwindの 'text-white' に相当 */
padding: 1rem; /* Tailwindの 'p-4' に相当 (通常1remは16pxに相当) */
border-radius: 0.25rem; /* Tailwindの 'rounded' に相当 (通常0.25remは4pxに相当) */
}
Tailwind で書いた場合
下記のように予め用意されているclassを使えます（それ以外も
<div class="bg-blue-500 text-white p-4 rounded">
hello
</div>
この例では、以下のスタイルをdivタグに適用しました
- bg-blue-500: 背景色を青色に設定。
- text-white: テキストの色を白に設定。
- p-4: 全方向のパディング（内側の余白）を適用。
- rounded: 角を丸める。
上記のように直感的に書けるので
慣れてる人は爆速でコーディングが出来るのが強みだと改めて感じました。
久しぶりに触ってみて
以前使用してみた時は２年ほど前で、バージョンが2系と言われるやつで
使い慣れてないのもあり、1回だけプロジェクトで試してそれっきりでした。
今回改めてバージョン3系と言われる最新系のを使用してみたところ
以前のことをあんまり覚えてないのでアレなのですが
体感としては、めちゃめちゃ便利で使いやすくなってました。
JITエンジンになったおかげで軽くなったのと、数値の指定や擬似要素やCSSプロパティがほぼ使えるようになってて感動しました。
例 []で囲んだ箇所に直接pxを指定できるようになってた。（2系の時もできたらごめんなさい
<div class="p-[10px]">
hello
</div>
2系の時にTailwind試して合わないと思ってやめた方は是非試してほしいです。
Tailwind書くときにあると便利だったもの
ここからはTailwindを書く際に導入したらよかったものなど書いておきます。
筆者の環境
Tailwindのバージョン
tailwindcss:"3.3.5"
エディタ
vs code
vsCodeの拡張機能
Tailwind CSS IntelliSense
Tailwind CSSのClass名を自動で補完できます。
プラグイン
eslint-plugin-tailwindcss
ESLintのTailwind用のプラグインです。
daisyUI
Tailwind CSSに基づくUIコンポーネントライブラリ。ボタン、カード、フォームなどの準備済みコンポーネントを提供してくれる。
上記しかまだ入れてないので
他にも便利なものあったらコメントで教えてください。
困ったこと
自分は以前書いたcss(scss)をTailwind cssに置き換えるという方法で勉強してたのですが
Tailwind cssを使用する中で困ったことや、ハマったことを記載します。
どのクラス使えば良いか
チートシート見ましょう
それか、cssをchatGPTに tailwind3系に直してって丸投げすれば割と解決
モバイルファースト
TailswindCSS はモバイルファースト
指定したブレークポイント以上ではどうなるか、でクラスを指定する
これのせいで脳死で移植というわけにはいかず大変だった。
ブレイクポイントは下記のように
tailwind.config.js 記載する
screens: {
xs: '425px',
sm: '600px',
md: '768px',
lg: '960px',
xl: '1160px',
}
クラス名が長くなる
自分の場合はクラスの並び替えはプラグインに任せてたので
コード上ではルールを決めて改行することとしてました。
下記はサンプルです。
下記のHTMLコードは、Tailwind CSSを用いたクローズボタンの実装例です。
このボタンは疑似要素 before と after を使用して「×」アイコンのような形状を作成しています。
かなり横に伸びて読みにくいですよね。
<span className="absolute right-[16px] top-[27px] h-[22px] w-[22px] cursor-pointer rounded-full border border-black before:absolute before:left-1/2 before:top-1/2 before:h-[15px] before:w-[1px] before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-45 before:border before:border-black before:bg-black before:content-[''] after:absolute after:left-1/2 after:top-1/2 after:h-[15px] after:w-[1px] after:-translate-x-1/2 after:-translate-y-1/2 after:-rotate-45 after:border after:border-black after:bg-black after:content-['']"></span>
自分の決めたルール クラスは1行につきに最大4~5個までとする
まとまりを意識する（曖昧３cmでごめんなさい
それだけ意識するだけで、以前のコードよりはマシにはなります。
<span
className="
absolute right-[16px] top-[27px] h-[22px] w-[22px]
cursor-pointer rounded-full border border-black
before:absolute before:left-1/2 before:top-1/2 before:h-[15px]
before:w-[1px] before:-translate-x-1/2 before:-translate-y-1/2
before:rotate-45 before:border before:border-black before:bg-black before:content-['']
after:absolute after:left-1/2 after:top-1/2 after:h-[15px]
after:w-[1px] after:-translate-x-1/2 after:-translate-y-1/2
after:-rotate-45 after:border after:border-black after:bg-black after:content-['']
"
onClick={closeModal}
></span>
命名について
daisyUI とかのプラグイン使ってると自作したクラス名との衝突もあるので対策は必要
あと自分だけかもしれないのですが
line-height が leading
border-radius が rounded
上記の2点はよくなんて名前だっけって今だにチートシート見にいっちゃいます。
最後に
以前、Tailswind CSSの2系を使っててあんまり使いこなせなかった男が
最新のTailswind CSSを触ってみると以前より便利になっていて、楽しくてコーディングたくさんしたよってお話でした。
Tailswind CSSを使いこなせることができれば、迅速なスタイリングと一貫性と再利用性そしてコードの可読性も向上するので
皆さんもぜひTailswind CSS試してみてはいかがでしょうか！
Discussion
daisyUIなどのコンポーネントライブラリも便利ですが、HeadlessUIやRadixUIのようなヘッドレスUIライブラリは見た目を自分で作成できるのでおすすめです！