Tailwind CSS のイマイチなとこ

イントロダクション

Tailwind CSS はとても素晴らしい CSS フレームワークです。

ただ、導入や入門の記事は多いですが、実際に使ってみての感想みたいな記事があまり多くなかったため、あえて Tailwind CSS を実際に案件で使っていて「イマイチかも。。。」と思ったところを書いてみようと思います。

（IE11 対応が必要だったので、執筆時点での最新版である v2.0.1 ではなく v1.9.6 を使用したため、以下のイマイチなところは改善されている可能性もありますので、ご了承ください）

イマイチを書く前に。。。

ペライチの LP を一回つくっただけの、ペラい感想でもあります。

自分がまだ見つけられていない解決策もあるかと思うので、なにかお持ちの方はぜひコメントいただきたい！

Tailwind CSS の良さはこれの倍以上ありますので、自分はこれからもどんどん使っていきますし、今回見つけられなかった改善案も探し続けます。

I Love Tailwind CSS !!!!

イマイチなとこ

class 属性にたくさん CSS クラスを書くと見ずらい

たとえば、 React のコンポーネントで以下のようなものを作るとして、

import React from 'react';

type Props = {
  text: string;
};

export const Tag: React.FC<Props> = ({ text }) => (
  <div className="inline-block px-16 py-2 font-bold text-white rounded-full md:px-18 md:py-4 bg-orange text-16 md:text-18">
    {text}
  </div>
);

こんな感じになるかと思います。

スマホサイズだけ作っているときはそんなに気にならなかったのですが、レスポンシブで md: を使い始めると少し見づらくなってきました。

ちなみに、普通に CSS で書くと、

.tag {
  display: inline-block;
  padding: 2px 16px;
  font-weight: bold;
  color: white;
  border-radius: 9999px;
  background-color: orange;
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  .tag {
    padding: 4px 18px;
    font-size: 18px;
  }
}

こうですかね。

（後述しますが、今回の案件では p-16 -> padding: 16px のように、 CSS クラス名の数値を px として使いました）

慣れの問題もあるかもですが。

改善案

HTML のネストは多くなってしまいますが、要素を増やすことで少し見やすくなりました。

import React from 'react';

type Props = {
  text: string;
};

export const Tag: React.FC<Props> = ({ text }) => (
  <div className="inline-block px-16 py-2 rounded-full md:px-18 md:py-4 bg-orange">
    <span className="font-bold text-white text-16 md:text-18">{text}</span>
  </div>
);

自由度が高いデザインだと、 CSS クラス縛りという制限の恩恵が受けれない

---

追記
下記のように spacing の値を 1〜300 にしてしまうと、出力される CSS がかなり肥大化してしまいます（わたしの場合 CSS ファイルが 2MB 近くになっていました）

本番ビルドで不要な CSS を省くことはできますが、開発時にとても重くなってしまうので控えたほうがいいです。

---

（後述しますが、今回の案件では p-16 -> padding: 16px のように、 CSS クラス名の数値を px として使いました）

自由度の高い LP とかでは、たとえば Default spacing scale では対応できない大きさが出てくるので、 tailwind.config.js で

const generateSize = () => {
  const size = {};
  for (let i = 0; i < 301; i++) {
    size[i] = `${i}px`;
  }
  return size;
};

module.exports = {
  theme: {
    spacing: generateSize(),
    fontSize: generateSize(),
  },
};

こんな感じで、適当なサイズのスペースを作ってました。（もっと良い書き方があるかもですが、ご容赦ください m(_ _)m）

TailWind CSS は、「CSS クラスによる制限があるので、デザインにルールが生まれる」というメリットがありますが、デザイン側にしっかりとしたルールが必要です。

改善案

デザイナーさんに事前相談しましょう！
レッツコミュニケーション！！

@apply と @screen が併用できない

さきほど例に出した Tag コンポーネントの CSS クラスを @apply を使ってまとめようとしたとき、

.tag {
  @apply inline-block px-16 py-2 font-bold text-white rounded-full md:px-18 md:py-4 bg-orange text-16 md:text-18;
}

こうしたいところですが、 @apply で　md: のようなレスポンシブ用の CSS クラスは使えません。

そこで、こう

.tag {
  @apply inline-block px-16 py-2 font-bold text-white rounded-full bg-orange text-16;

  @screen md {
    @apply px-18 py-4 text-18;
  }
}

したいところですが、これもエラーになってしまいます。

自分の場合はあまり時間がなかったので、 CSS プロパティに書き直し、 @screen だけ使わせてもらいました。

.tag {
  display: inline-block;
  padding: 2px 16px;
  font-weight: bold;
  color: white;
  border-radius: 9999px;
  background-color: orange;
  font-size: 16px;
  
  @screen md {
    padding: 4px 18px;
    font-size: 18px;
  }
}

改善案

（ご存じの方、ぜひコメントを！）

---

追記
コメントいただきました！
https://zenn.dev/otsukayuhi/articles/5fe601c952747c133210#comment-47e7e6e0544eb0

---

Tailwind CSS の CSS クラスだけで完結は難しい

デザインによるかと思いますが、 ::before や ::after といった疑似要素が使えなかったり、 background-image の画像パスを指定したりはできないので、そこは従来どおりに CSS クラスを書いたり、もしくは、 CSS in JS したりと、 Tailwind CSS の外で対応する必要があります。

ただ、それでも従来の 1/10 くらいの記述量になったので、十分に導入した恩恵がありました。

first: や last: が、なんか動かない

なんか、動かなかったです。（自分の環境依存かもしれませんが）

改善案

（ご存じの方、ぜひコメントを！）

---

追記
v1.x 系と v2.x 系で設定が変わっているようです。
https://zenn.dev/otsukayuhi/articles/5fe601c952747c133210#comment-5fb79559dd5487

（自分は v2.x のドキュメントを見ていました）

---

最後に

以上、自分が触ってみてイマイチだと思ったことでした。

ユーティリティーファースト CSS というアプローチがまだ新しいこともあり、今後ベストプラクティスが出てくるはずですし、自分自身もそれを探したいと考えています。

そのときに、この記事がイマイチになっていることを望みます。