【DAY14】Tailwind CSSについて

Tailwind CSSとは

Tailwind CSSは、CSSフレームワークのひとつで、ユーティリティクラスを使ってデザインを行うことができます。ユーティリティクラスには単一の機能が割り振られており、基本的には、1つのユーティリティクラスが1つのCSSプロパティと対応します。つまり、HTMLで使用したいCSSに対応したクラス名をつけることで、Webサイトの装飾が行えるといった感じです。
通常はHTMLでクラス名を考えて付け、CSSでそのクラスに対応したプロパティ等の記述をするかと思います。Tailwind CSSを使うことで、クラス名を考えるという工程が無くなるため、実装速度が上がります。

Bootstrapとの違い

私は使用したことがほとんどありませんが、CSSフレームワークとしてはBootstrapも広く使われているようです。そこで、BootstrapとTailwind CSSの違いについてまとめてみようと思います。

• デザインを作るクラスの有無
  Bootrtrapではデザインを作るクラスが存在します。つまり、少量のクラス名の指定で多くのCSSを反映させたデザインを作ることができます。このように、あらかじめ用意されたスタイルやコンポーネントが多いのが特徴です。
  Tailwind CSSは基本的に1つのユーティリティクラスが1つのCSSプロパティと対応します。そのため、指定するクラス名は多くなり、CSSの知識が必須となります。一方で、デザインのカスタマイズ性、トラブルシューティングのしやすさについてはBootstrapより優れていると思われます。

Tailwind CSSのカスタマイズについて

私はTailwind CSSのチートシートを見ながら装飾をしていましたが、チートシートには載っていないものもあり、それらについては別途クラス名を考えて別ファイルのCSSに記述をしていました。例えば、calcを使用したwidthやheightの指定、メジャーでない色の指定などです。しかし、Tailwind CSSの公式サイトをちゃんと読むと、デフォルトではないものについてもカスタマイズすることで使用できるようです。最後にこのカスタマイズについて紹介します。

カスタマイズするには、tailwind.config.jsというファイルにその内容を記述します。
例えば、heightに12.5remを指定したいという時には、以下のように記述します。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
    //　ここから追加
      spacing: {
        '50': '12.5rem',
      }
      height: {
        '50': '12.5rem',
      }
    }
  }
}

こうすることで、クラス名でh-50を指定すれば12.5remの高さにすることができます。

<div class='h-50'>
    <p>200px</p>
</div>