【初心者でもわかる！】Tailwind CSSに慣れる為のtips

こんにちは。アイレットデザイン事業部の長谷です。

アイレットデザイン事業部では「INSIDE UI/UX」と題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

今回は、私自身最近業務で使用している「Tailwind CSS や そのクラス名」について、感じたことをまとめていきたいと思います。

※本記事は、2024年8月現在の情報をもとにしております

1. 基本省略が多い

Tailwindのクラス名は、その機能を短く簡潔に表現するために、多くの省略形が使用されています。例えば、text-centerはテキストを中央揃えにし、bg-red-500は背景色を赤にします。これらのクラス名はデフォルトのCSSよりも直感的で、HTML内で直接スタイルを適用することもできます。

省略の考え方にも法則がありそう
Tailwindのクラス名の省略形には一定の法則があります。これらの法則を理解することで、新しいクラス名を予測しやすくなります。例えば、mt-4は上マージン（Margin Top）を1remに設定し、px-4は左右のパディング（Padding X-axis）を1remに設定します。これらのクラス名は、CSSプロパティの頭文字と値を組み合わせた形になっています。
個人的に、「何」を「どのように」を意識してクラス名を見ていただければ、慣れるまで早いのではないかと思います。

2. 余白に関してはx軸（横軸）とY軸（縦軸）での考え方が基本

Tailwindでは、余白（マージンとパディング）の設定もクラス名で行います。m-{n}でマージン、p-{n}でパディングを設定できます。また、-xや-yを使って、x軸（横軸）やy軸（縦軸）だけに余白を設定することも可能です。

3. チートシートを活用する

最初にクラス名に慣れるためには、有効かと思います。
ただし、チートシートがTailwindCSSのどのバージョンに対応したものか、
あらかじめ確認は必要だと思います。

※2024年8月現在時点

4. エディタの拡張機能を使用する

筆者はVScodeを日頃使用しているため、そのVScode上で日頃愛用している拡張機能をご紹介します。

・Tailwind CSS IntelliSense
主にTaildindCSSのクラス名を補完してくれます。

この子がいる場合、クラス名をなんとなく覚えておけば、なんなくコーディングできると思います。ただし、当たり前ですが、しっかり覚えておいた方が、作業スピードは早いと思います。

・Tailwind Docs
使用頻度が低い、全くわからないクラス名を探す時には、よく使います。

VScode上からTailwindCSSの公式ドキュメントを立ち上げることができ、画面を移動せずにクラス名を探せます。ブラウザ上から公式ドキュメントを立ち上げることもできますが、モニターを使用していない方やWindowsの方などは、一画面で完結した方が楽な気もするので、おすすめです。

・Headwind
雑に記述したクラス名を法則に従い、順番を並べ替えることができます。様々な言語を記述する時に使用できます。クラス名が毎回同じ順番だととてもみやすくなりますし、第三者が保守運用する際にも、助かります。

ただし欠点としては、HTMLやJSX・TSXタグ上に直接書いたTailwindCSSにしか対応していないので、例えばCSS in JS使用時やSCSS @applyディレクティブ使用時などは、自動形成することができません。それができれば、手軽で最強なのに、、、

5. まとめ

ここまで「Tailwind CSS や そのクラス名」に慣れるためのtipsについてまとめてきました。Tailwind CSSのクラス名はとても直感的でわかりやすいのですが、それでもデフォルトのCSSとは仕様が異なるため、慣れが必要だと感じました。

今後のアップデートによって、Tailwind CSSの仕様が変わる可能性がありますが、頻繁に仕様が大きく変わる事は少ないのではないかと思います。

今回の記事によって、誰かが少しでも早くTailwind CSSに慣れることができれば幸いです！

本記事を読んでいただきありがとうございました！