🐈

CSS in JS派だった私がTailwind CSSを使ってみた

2021/06/23に公開

CSS

これまで CSS in JS メインだった私が Tailwind CSS を採用して感じたことをまとめました。
Tailwind CSS 予想以上に良かったです！

命名コストを削減できる

個人的にはこれが Tailwind CSS を採用して一番良かった点です。
エンジニアにとって「命名」はとても大切ですが、その分エネルギーを消費する作業です。
しかし、Tailwind CSS は Utility-First なライブラリで、事前に各スタイルに対応するクラスを用意してくれているので、実装者は className に値を追加していくだけでスタイリングすることができ、「命名」する手間を省くことができます。
これは特に margin や padding などのスペーシングを指定するためだけの要素を作る際に恩恵を感じました。styled-components の場合はスタイルを当てた要素を新しく作る際に命名が必要ですが、~Container や ~Wrapper などの微妙な命名になることが多くかなり辛かったです。CSS Modules を採用した場合でもクラス名を考える必要があるので同様の辛みがありますね。

// Tailwind CSS
<div class="mt-8 mb-12">
  <h1>Tailwind CSS</h1>
</div>;

// styled-components
const TitleContainer = styled.div`
    margin-top:32px
    margin-bottom:48px
`;
<TitleContainer>
  <h1>styled-components</h1>
</TitleContainer>;

デザインシステムの恩恵を受けられる

前述したように Tailwind CSS は Utility-First なライブラリで、事前に各スタイルに対応するクラスを用意してくれています。その結果、プロジェクト内で小さなブレが自然と少なくなります。例えば font-size が 16px か 17px かで迷うことは無くなります。なぜなら、text-base というクラス名にはfont-size:16pxが割り当てられているが、17px に対応するクラス名が用意されていないからです。下記コードは上記例が理解しやすい用に実際のクラスを抜粋したものです。

/* 16px */
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* 18px */
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

全体的に整った UI を作るためには、毎回具体的な値を指定するのではなく、事前に決められた値を使い回すことが必須だと思います。それを追加設定無しで体現できるのは魅力の 1 つだと感じました。ただ、流石に追加設定なしだと選択できる範囲が広すぎるので、font-size や colors などのよく使う値に関しては、tailwind.config.js ファイルの theme で上書きや拡張などの追加設定を行うことをおすすめします。同様の theme 機能が styled-components や Emotion にもあるので馴染み深い方も多いと思います。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{ts,tsx}'],
  darkMode: false,
  theme: {
    fontSize: {
      xxs: '16px',
      xs: '20px',
      s: '24px',
      m: '32px',
      l: '48px',
      xl: '64px',
    },
    colors: {
      black: '#000000',
      white: '#FFFFFF',
      arcLight: '#CBE6FF',
      fusionRed: '#FE6870',
      cascadingWhite: '#F6F6F6',
    },
    fontFamily: {
      title: ['Lora', ...defaultTheme.fontFamily.serif],
      body: ['Noto Serif JP', 'serif'],
    },
  },
};

「確かに小さなブレが無くなって便利そうだけど、事前に定義されていない値を使う場合にはどうすればいいの？」と疑問に感じる方もいらっしゃるかと思います。解決策は 2 通りあります。

tailwind.config.js で拡張する
JIT モードを使用する

tailwind.config.js で拡張する

特定の 1 箇所のみで使用する場合にはこの方法は適しません。
複数箇所で使用するが、事前に定義されていない値を使う場合に試してみましょう。
https://tailwindcss.com/docs/theme

JIT モードを使用する

この機能は現在プレビュー版です。そのため将来的には一部詳細が変更される可能性がありますが、個人的には気にしすぎることはないと思っています。JIT モードの場合、スタイルはオンデマンドで生成されるので、top-[-325px]のように角括弧表記を使用することで、独自のユーティリティを生成できます。そのため、下記コード例のようにpositionで配置箇所を詳細に指定することも可能となります。とても便利な機能ですが、デザインシステムを崩さないためにも、基本的には事前に定義されている値を使用するように心がけましょう。

// <!-- Sizes and positioning -->
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">

コードレビューがしにくい

理由は簡潔で、慣れるまではクラスに対応するスタイルを随時確認する必要があるからです。
慣れてくると、頭の中でクラス名とスタイルが自動変換されるので時間の問題かと思います。
1 つの目安としてですが、私は Tailwind CSS を使い始めてから 1 週間程度である程度慣れてきて、チートシートを確認せずにコードレビューできるようになりました。
コードレビュー、実装共に慣れるまでは下記チートシートに大変お世話になりました！

他ライブラリと相性が悪い場合がある

例えば、react-modal というライブラリを使用してモーダルを実装する場合、Tailwind CSS でスタイリングすることは難しいです。理由としては、 react-modal がReactModal__Overlayというオーバーレイ用のクラスと本体用のReactModal__Contentというクラスを生成して、それぞれのクラスに対してスタイルを当てる方式だからです。こういった場合は無理して Tailwind CSS だけを使用するのではなく、CSS Modules など別の方法を臨機応変に使い分ければよいかと思います。
http://reactcommunity.org/react-modal/

おまけ

これまではbefore、afterなどの疑似要素が使用できないという辛みがありましたが、最近リリースされたv2.2で対応したようです！

おわりに

今回は、これまで CSS in JS メインだった私が Tailwind CSS を採用して感じたことをまとめました。かなり賛否両論のある Tailwind CSS ですが、個人的には結構気に入ったので、次のプロジェクトでの採用も前向きに考えたいと思います。
今後より一層 Tailwind CSS と Next.js の相性も良くなりそうなので楽しみです！