【TailwindCSS】早見表のChrome拡張をつくってみた

どうもこんにちは塚本です。
今日は実務で役立つ拡張機能を作った話をしようと思います。

弊社ではコーディングやシステム開発にTailwindCSSを導入しています。
名前の通り、慣れればまさに追い風のようにコーディングができるようになります。

TailwindCSSとは
1. Bootstrapの特徴
2. TailwindCSSの特徴
  1. コード例
困ったこと
1. font-sizeの対応表
フォントサイズ早見表
スペーシング早見表
まとめ
1. フォントサイズ早見表
2. スペーシング早見表

TailwindCSSとは

ここで、TailwindCSSを知らない方のために軽く説明しておきます。
TailwindCSSとは、CSSを簡単かつ迅速に書くためのフレームワークです。

HTMLにクラスを追加することでスタイリングを行うのが特徴です。
「Bootstrapと何が違うの？」と思った方は鋭いです。

両者の特徴を軽く見ていきましょう。

Bootstrapの特徴

あらかじめ用意されたデザインパターンを利用するスタイル
- container,badge, btn-primary …
汎用的なパターンが多いのでファイルサイズが大きい
柔軟性は少し低い

とりあえずいい感じのボタンやバッジが欲しい！みたいな時に向いています。

TailwindCSSの特徴

基本的なスタイルをクラスで書いていく仕組み
- font-bold, text-white, flex, flex-wrap …
クラスの組み合わせによって柔軟にスタイリング可能
ビルド時に必要なクラスだけを生成するため、必要最小限のファイルサイズで済む
クラス名を覚えるのが大変

コード例

例えばこのようなコードがあったとします。

<style>
    .hoge {
        margin: 1rem;
        padding: 1rem;
        font-size: 1.5rem;
        background-color: white;
        font-weight: bold;
    }
</style>
<div class="hoge">
    コンテンツ
</div>

TailwindCSSを用いて同じことをするとこうなります。

<div class="m-4 p-4 text-2xl bg-white font-bold">
    コンテンツ
</div>

困ったこと

TailwindCSSは柔軟性があり、HTMLと同時にスタイルを作っていけるため、とても便利です。
ですが、クラスがめっちゃくちゃに多いという欠点があります。

特によく使う、font-sizeやmargin, paddingだけでもかなりの量です。

font-sizeの対応表

実際のTailwindCSSのfont-sizeのクラス名と値の対応になります。

クラス名	値(px)
`text-xs`	12px
`text-sm`	14px
`text-base`	16px
`text-lg`	18px
`text-xl`	20px
`text-2xl`	24px
`text-3xl`	30px
`text-4xl`	36px
`text-5xl`	48px
`text-6xl`	60px
`text-7xl`	72px
`text-8xl`	96px
`text-9xl`	128px