Zenn
👽

CSS嫌いエンジニアの生存戦略~TailwindCSSはいいぞ~

2023/09/29に公開
CSS
Tailwind CSS
#
エンジニア
tech

このページを訪れた方へ

CSSが嫌い？それとも苦手？
この記事は、CSSへの苦手感を拭えないエンジニアがなんとかCSSと仲良くやっていくために試行錯誤したものです。CSSが苦手な理由にどこの要素に何が効いているのかよくわからない、CSSを書くためにclass名を考えるのが面倒、CSSファイルがごちゃごちゃしてしまうが当てはまる方、一緒にTailwindCSSに助けを求めましょう。

TailwindCSSとは？

Rapidly build modern websites without ever leaving your HTML.
A utility-first CSS framework packed with classes like flex, pt-4, text->center and rotate-90 that can be composed to build any design, directly in >your markup.

https://tailwindcss.com/

公式ドキュメントの説明を引用すると、TailwindcssはHTMLから離れることなくモダンなWebsiteを構築できるCSSのフレームワークのようです。
class属性に特定のclassNameを指定することで、マークアップに直接組み込んでStyleを当てることができます。

例えば、このように記述するところを(image-textというclass名には触れないでください)、

<p class="image-text">CSSって不思議だね</p>

.image-text {
    position: absolute;
    background-color: white;
    top: 10px;
    left: 250px;
    padding: 10px;
    border: thick double #32a1ce;
    border-radius: 0.3rem;
}

TailwindCSSでは以下のように書くことができる

<p class="absolute bg-white top-10 left-[250px] p-2.5 border-double border-purple-500 border-4 rounded">CSSって不思議だね</p>
  • 長くない？
  • 見づらいのでは？

こう思ったみなさん、ちょっと待ってください。私も以前はそう思っていました。
しかし、TailwindCSSにはそれ以上にCSS嫌いにとっての利点があります。

TailwindCSSの良さ

  1. class名を何にするか迷わなくていい
  2. どの要素にどんなStyleを当てたかHTMLだけでわかる
  3. CSSファイルで迷子にならない

CSS苦手の民としては、TailwindCSSはこの3点においてとてもおすすめです。

class名を考えなくていい

みなさん覚えがありませんか？

imageタグだからdog-imgとでもつけておこう、あれ、この外側にもStyle付ける必要があるな、じゃあそこはouter-imgで...いやそれだとあっちとかぶる？outer-dogとかでとりあえずつけておこう...

ご覧ください、エンジニアとして最悪なclassNameの付け方です。
変数名や関数名をつけるときは気をつけられても、class名をつけるときはとりあえずでよくわからない名前をつけてしまう。かといってBEM記法を使用する気もない。そんなズボラCSS苦手民たち、TailwindCSSを使おう。

BEM記法との大きな違い

  • 学習コストが低い
  • CSSファイルを作る必要がない

上で用いた例でBEM記法を使ってみる。

<p class="catch__overlay-caption--left-top">CSSって不思議だね</p>

.catch__overlay-caption--left-top {
    position: absolute;
    background-color: white;
    top: 10px;
    left: 250px;
    padding: 10px;
    border: thick double #32a1ce;
    border-radius: 0.3rem;
}

BEM記法も長い、しかし結局CSSファイルにStyleを記述する。厳格な命名はできるけれどコードが長くなる。
さらに、学習コストも高い。
その点TailwindCSSだったら、長いclassNameはそのままStyleをつけることに繋がるのでコードが無闇に長くなることがないし、基本的なCSSを知っていればTailwindCSSのドキュメントで見つけることができるので学習コストも低い。

HTMLを見るだけでStyleがわかる

CSS苦手民の私がとくに苦手だと感じるStyleが、positionプロパティです。
特定の要素にStyleをかけてたくても、その要素の親要素などのStyleを変更する必要があります。
必要によって要素を囲む親要素を追加する必要、そして新しいClass名をつけてSyleをつける必要がある...段々と自分がどの要素にStyleをつけているのかわからなくなります。

そこでTailwindCSSの登場です。HTMLのタグに属性としてStyleを書き込むので、自分がどの要素にそんなStyleを当てているか一目でわかります。

もしHTML+CSSだったら...

<div class="outer-image">
	<img class="glass-image" src="..." alt="...">
	<p class="image-text">CSSって不思議だね</p>
</div>

.glass-image {
	...
}
.image-text {
    position: absolute;
    background-color: white;
    top: 10px;
    left: 250px;
    padding: 10px;
    border: thick double #32a1ce;
    border-radius: 0.3rem;
}
/* 親要素にもStyleが必要そう */
.outer-image {
  position: relative;
}

TailwindCSSを使うと

<div class="relative">
    <img style="height: 90vh;" class="w-auto m-auto" src="..." alt="...">
    <p class="absolute bg-white top-10 left-[250px] p-2.5 border-double border-purple-500 border-4 rounded">CSSって不思議だね</p>
</div>

親要素にStyleが必要とわかったら、親タグの属性に直接書き込むことができます。

これだけでHTMLファイルとCSSファイルを行き来してStyleを確認する時間がなくなります。

CSSファイルで迷子にならない

上に述べた例のように、必要を感じたらclassを追加してStyleを記述する、を繰り返しているとCSSファイルは乱雑になりがちです。
「とりあえず」と必要なものを上から記述していくと、見返すときにHTMLと睨めっこするというとても無為な時間が流れます。
とは言ってもBEM記法を使用したり、現段階では個人開発でコード規約をCSSまで適用するのは憚れる。
そんな方にぜひTailwindCSSをおすすめします。

TailwindCSSの使用例

以下のコードは、HTML+CSSで記述したものとTailwindCSSで記述したコードです。
ぜひ比較用にご覧ください。

通常のコード

TailwindCSSで実装

TailwindCSSの使い方

HTMLの<head>内に以下のコードを埋め込むだけで使用できます。詳しくは公式ドキュメントへ

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

TailwindCSSの弱点と抜け道

こんなに便利なTailwindCSSですが、CSSに比べて自由度が狭いことが弱点として挙げられます。(選択肢が多いことが苦痛になる人(私)にはかえって利点！)

しかし、もしもTailwindCSSにないStyleを使いたい際は、いくつかの抜け道を使うことができます

  1. 従来のstyle属性を使う
  2. その場限りのプロパティを生成する。

従来のstyle属性を使う

この例で、class属性に付与しているのがTailwindCSS、style属性に付与しているのが従来のstyleです。

<section style="width:70vw; height:90vh" class="m-auto mt-2 bg-cyan-200 text-center" > </section>

TailwindCSSでは、vw、vhを使用するものはフルスクリーンのものしかありません。そう言った場合、従来のstyle属性を使用して微妙な調整を行うことができます。

その場限りのプロパティを生成する

TailwindCSSで用意されているclassNameはすべての微妙な調整に使えるというわけではありません。
たとえば、widthをpx単位で指定する必要のある場合、0と1しかなく、〇〇pxに値するものとして用意されているものでも、2の倍数や3の倍数しかないなど目的のものに該当するものがない場合があります。

そんなときに使えるのがその場限りのプロパティです。

<div class="w-0"></div>
<div class="w-px"></div>
<div class="w-3.5"></div>

以上のように用意されているプロパティだけでなく、

<div class="w-[250px]"></div>

このように、その場限りとして[]を使用してプロパティを作成することができます。
もちろん、頻繁に使うものであればconfigファイルでTailwindCSSのthemeをカスタマイズして追加することもできます。

まとめ

いかがだったでしょうか？
今回は

  • どこの要素に何が効いているのかよくわからない
  • CSSを書くためにclass名を考えるのが面倒
  • CSSファイルがごちゃごちゃしてしまう

という悩みを解決するTailwindCSSを紹介しました。
CSS苦手でもいいプロダクトを作りたい！巨人の肩に載って乗り越えていきましょう🦾

🌈👽 Happy Hacking 👽🌈

Discussion