Tailwind CSS を使ってみたけど自分には合わなかった話 

## この記事の内容
- 会社で色々実験できる時間があったので、今更だけどTailwindを試してみました
- 結果、私には合わずCSSベタ書きが早いという結論に
- 導入のイチ失敗事例として読んでいただければ

## はじめに - どうして使うことになったのか
今勤めている会社には[個人開発に使える時間](https://note.com/shwld/n/nfb1a2abfc9eb)があります。
各人、好きなアプリを作れるのですが、短いサイクルで作る必要があったのもあり、
弊社[CTOが提供しているボイラーテンプレート](https://github.com/shwld/graphql-ruby-on-rails-with-spa)(※)を使って作ることにしてみました。
そちらにTailwindがデフォルトで入っていた感じです。

※ ただ、CTOには申し訳ないのですが、若干ライブラリ等が古いのでforkして使いたい方はアップデートをおすすめします...。

## 自分について
私自身は、普段はエンジニアをやりつつ週末にデザイナーもやっています（大学は美術系でした)。
CSSはエンジニアの中ではかなり得意な方だと思っています。

## 作りたいもの
今回作ろうとしていたのはこんな感じのアプリです。割とCSSでしっかりとスタイルを作り込む必要のある画面です。
![スクリーンショット 2023-04-26 11.15.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393888/932e9b0f-7b5d-051e-4243-572cc64578f7.png)

## 全体的に何が難しかったか
Tailwindを使ってみて、**今までのCSSの書き方を発想から根本的に変えねばいけない感じ**に見舞われました。
要するに私の頭がTail windについていけなかった。

CSSの書き方の流れを変えようとしたTailwind CSSの開発者の方は素晴らしいと思う。
ただ、私のTailwindへの理解が希薄だったか、愛が足りなかったか、はたまた頭が固かったため、Tailwindの思想についていくことができませんでした。

### ペイン①　extend, mixinが使いにくい

例えばなのですが、私はよくこんな風に**タイトルならタイトルの「基本のスタイル」を作って、状況に合わせてそれにスタイルを追加していく**、という書き方をしてきたのですが...
```sass
%title-text-base
  color: $blue
  font-weight: bold

%h1-text
  @extend %title-text-base
  font-size: rem(64)
  text-align: center

%h2-text
  @extend %title-text-base
  font-size: rem(24)
  margin-bottom: 16px

%h3-text
  @extend %title-text-base
  font-size: rem(16)
  margin-bottom: 8px
```
Tailwindだとそれを実現するのが難しかったです。
おそらくは、全ての`h1`,`h2`タグに個別にスタイルをあてなくてはいけないことになりますか？

```html
<!-- 多分こんな感じという予想 -->
<h1 class="text-2xl font-bold text-blue-700 mb-8 text-center">見出し１</h1>
<h2 class="text-xl font-bold text-blue-700 mb-4">見出し2</h2>
<h3 class="text-lg font-bold text-blue-700 mb-2">見出し3</h3>
```

コンポーネント化して使い回すにしても、`h1`と`h2`などのタイトルテキストに**共通するスタイルは何で、要素によってどこが違うのか**パッと見にはわかりづらいなあと感じてしまいました。

### ペイン② before, after要素のスタイルあてるのが面倒くさい

先ほどの画面、例えばこの部分など。`before`, `after`などの擬似要素を使って実現している要素が画面内にたくさんあります。そして、Tailwindでこれらにスタイルをあてるのが面倒くさかった :sweat_smile: 

[![Image from Gyazo](https://i.gyazo.com/47096273261651ae3885b9d2026dc59f.png)](https://gyazo.com/47096273261651ae3885b9d2026dc59f)

Tailwindで擬似要素にCSSをあてるやり方は調べればすぐに出てくるのですが...、

▼例えばこんな記事
https://blog.to-ko-s.com/tailwind-before-after/

「~~こんにちは~~に二重の打ち消し線を引く」のようなCSSでもここまで書かねばいけないということもあって...。非常にわかりにくいと感じました。

```html
<body>
  <div class="
  w-fit text-4xl relative 
  before:absolute before:left-0 before:top-7 before:w-full before:h-[2px] before:bg-red-600 
  after:absolute after:left-0 after:top-4 after:w-full after:h-[2px] after:bg-red-600
  ">
	<h1>こんにちは</h1>
  </div>
</body>
```
出典：　[『【tailwindcss】疑似要素 ::before(::after)を使ってみよう！』](https://blog.to-ko-s.com/tailwind-before-after/)

こんな風に書いた方が、`::before`, `::after` にそれぞれ何があたっているか一目瞭然で、少なくとも私にはわかりやすかった。（下記は、上で紹介したTailwindのコードをsassにしたらこんな感じかなと想像して書いたコード）

```sass
.text
    position: relative
    %bar
        background: $red
        content: ''
        display: block
        height: 2px
        left: 0
        position: absolute
        width: 100%
    &::before
        @extend %bar
        top: 7px
    &::after
        @extend %bar
        top: 4px
```

### ペイン③ クラス名から何作ってるのかわからなくなる

BEMの書き方に慣れていたせいか「クラス名は構造を表す」という形に慣れていたので...。Tailwinddeはクラス名にコンテンツの特徴がないのが辛かったです。だんだん何を作っているのかわからなくなりました。
以下は、[Tailwindの公式サイトのトップ](https://tailwindcss.com/)にあるカードのHTMLです。

```html
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
```
カードっぽいクラス名、どこにも見受けられず:joy:
多分これ、自分ならこういうHTMLにしそうだなと思ったのがこれ。

```html
<figure class="card">
  <img class="card__img" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="card__info">
    <blockquote>
      <p class="dialogue">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="personal-info">
      <div class="personal-info__name">
        Sarah Dayan
      </div>
      <div class="personal-info__occupation">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
```

見やすくなる上に「何のパーツのCSSなのか、わかりやすくなるな」と。
人によっては **「さまざまなCSSファイルを見に行かねばならなくなる方が苦痛だ！」という人もいるのでしょうが、あくまでも私はこう感じた**、ということで。

## まとめ
結局、私は途中からHTMLファイルとCSSファイル両方にスタイルを記述するようになってしまって、結局どこにスタイルが書いてあるのか色々探さなくてはならなくなってしまいました。Tailwindはmarginなどのスペーシング調整に少しだけ使うのに落ち着いてしまった...。:cry:


最初にも書いたけれども、流れを変えようとしたTailwind CSSの開発者の方は素晴らしいと思う。
ただ、私のTailwindへの理解が希薄だったか、頭が固かっただけ。

ただ、**総合して、少し複雑なCSSをすっきり書きたい人にはあまり向かないんじゃないのかな**というのが１ヶ月ほど触ってみた感想でした。

## お礼と参考情報

それでは、ここまで読んでくださりありがとうございました。
会社のメンバーも今回の個人開発アプリ企画で色々と面白いものを作っています。
よかったら[会社の他メンバーの作品たち](https://indie-dev.mof-mof.co.jp/)もご覧ください。

この記事は、株式会社mofmofの「水曜日の個人開発」の取り組み内で書きました。
https://indie-dev.mof-mof.co.jp