2021/11/27

React で Tailwind CSS

React で Tailwind CSS に触ってみた。

開発環境

Tailwind CSS v2.2.17

本文

自分の勉強がてら CSS はなるべく自分で書いていたのだが、今作っている物はお手軽に綺麗にしたかったので、何回か耳にしたことがあった Tailwind CSS を実際に触ってみた。

そもそもあまり真面目に Tailwind CSS のことを調べたことがなかったのだが、既に用意してある CSS ファイルをポンと置くだけというわけではなくてインストールが必要である。
プロジェクト内で使用していないクラスは削除してくれるとのこと。

私は create-react-app でプロジェクトを作っていたが、ご丁寧に導入方法が公式で案内されていたので、これに従ってインストールを行った。

Install Tailwind CSS with Create React App

自分でカスタマイズしないとすれば、あとは膨大なクラスを把握して指定していくだけになる。

この「膨大なクラスを把握して指定する」というのがなかなか大変という印象だが、自分で何も書かなくても大体全部できるようにするにはおそらく仕方ないのだと思う。

まずある程度画面を整えようと思って適当にクラスを指定していったのだが、\n で改行してある文字列をそのまま画面に表示すると改行が消えることに対応する white-space: pre-wrap; を指定するクラスなどもきちんと用意してあった。

Whitespace

またダークモード対応も簡単にできる。今まで自分で CSS を書くときにダークモード対応はしていなかったのだが、初めて対応してみた。

Dark Mode

リストの要素に下記のようにクラスを指定した場合

<li key={item.id}>
    <div className="text-gray-900 dark:text-white whitespace-pre-wrap break-words mb-2">{item.text}</div>
    <div className="text-sm text-gray-500">
        <time dateTime={item.updated}>
        {dayjs(item.updated).format('YYYY-MM-DD HH:mm:ss')}
        </time>
    </div>
</li>

Windows のカラーテーマを「ダーク」にしているときはこのように

dark-mode

「ライト」にしているときはこのようになる。

light-mode

勝手に切り替わらないようにする方法もあるのだが、あんまり必要性を感じないのでこのまま進めようと思う。