はじめに
よく使われるCSSフレームワークの一つであるBootstrapは、フロントエンド開発にRreactやVue.jsが用いられることが多くなった昨今では、あまり使用されなくなってきているようです。代わりに、Tailwind CSSの採用が増えてきているようなので、概要とBootstrapとの違いについてまとめてみようと思います。
Tailwind CSSとは
Tailwind CSSはUtility FirstをコンセプトとしたCSSフレームワークです。このコンセプトでは、コンポーネントではなく、utility classを用いてページをデザインしていきます。
utility class
utility classを用いた場合とコンポーネントを用いた場合で、どのような違いが有るか、コンポーネント側の例としてBootstrapと比較して説明します。
Bootstrapでボタンを表示する際は以下のようなコードになります。
| 1 | <button class="btn btn-primary" type="button">Click Me!</button> |
一方、Tailwind CSSを用いた場合だと、以下のようなコードになります。
| 1 | <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Click Me!</button> |
このように、Bootstrapでは、
btn
というコンポーネントが定義されていて、それを適用しますが、Tailwind CSSでは、classを自分で組み合わせてボタンを作る必要があります。
Bootstrapとの比較
ここでは、柔軟性、コード量、学習コスト、ファイルサイズ、その他について、Bootstrap比較してみます。
柔軟性
デザインの柔軟性では、Tailwind CSSのほうが優れています。Bootstrapで標準で用意されているのは、塗りつぶしたボタンか、アウトラインのボタンのどちらかで、角丸の大きさの調整など、細かな調整にはひと手間かかります。
一方、Tailwind CSSでは、色、フォントの太さ、ホバー時の変化など、クラスを組み合わせることで好きなボタンを表現することができます。
コード量
コード量は、Bootstrapの方が少なくなります。utility classの説明で例にあげたように、Bootstrapでは、
btn
、
btn-primary
を書くだけですが、
| 1 | <button class="btn btn-primary" type="button">Click Me!</button> |
Tailwind CSSでは、たくさんのクラスを書く必要があります。
| 1 | <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Click Me!</button> |
ただし、Tailwind CSSには@applyという書き方で、Tailwind CSSのクラスをまとめた独自のclassを定義することができるので、短い記述で済ませることもできます。
| 1 2 3 | .btn-primary { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded } |
学習コスト
学習コストは、体感ですがBootstrapのほうがclassの数が少ないので、Bootstrapのほうが少なくて済むと思います。
ファイルサイズ
Tailwind CSSはPurgeCSSに対応していて、公式曰く、だいたい10KBほどのサイズで済むそうなので、Tailwind CSSのほうが少なくなるでしょう。
その他
Tailwind CSSの特徴として、JavaScriptに依存していないという点があります。BootstrapはモーダルなどでBootstrapのJavaScriptに依存していて、それがReactやVue.jsと組み合わせた際にネックになるケースがあります。
反面、Tailwind CSS自体はモーダルなどのコンポーネントを提供していないので、他のフレームワークと組み合わせる必要があります。
なぜTailwind CSSが流行っているのか
Tailwind CSSが流行っている背景として、ReactやVue.jsなどのフレームワークを用いた開発が主流になっていることがあげられます。クラス名を考えるコストは高いですが、これらのフレームワークはCSSにスコープをもたせることができるため、機能にあったクラス名を考えるコストに対して、得られるメリットが少なくなってきています。
また、Tailwind CSSでは一つの要素に対して複数のクラスを付ける必要があるため、複数の画面で直接記述することは大変ですが、これらのフレームワークを使ってコンポーネント化してしまえば、一度の記述で済みます。よって、Tailwind CSSはこれらのフレームワークと合わせて使われるのが前提ではないでしょうか。
Tailwind CSSでの書き方
一般的によく使うもので、Tailwind CSSではどう書くか見てみましょう。
Font Size
Font Sizeは13段階あります。
| text-xs | font-size: 0.75rem; line-height: 1rem; |
| text-sm | font-size: 0.875rem; line-height: 1.25rem; |
| text-base | font-size: 1rem; line-height: 1.5rem; |
| text-lg | font-size: 1.125rem; line-height: 1.75rem; |
| text-xl | font-size: 1.25rem; line-height: 1.75rem; |
| text-2xl | font-size: 1.5rem; line-height: 2rem; |
| text-3xl | font-size: 1.875rem; line-height: 2.25rem; |
| text-4xl | font-size: 2.25rem; line-height: 2.5rem; |
| text-5xl | font-size: 3rem; line-height: 1; |
| text-6xl | font-size: 3.75rem; line-height: 1; |
| text-7xl | font-size: 4.5rem; line-height: 1; |
| text-8xl | font-size: 6rem; line-height: 1; |
| text-9xl | font-size: 8rem; line-height: 1; |
hover
hover:xxxx
（xxxxは適用したいクラス）の形で書きます。
| 1 | <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click Me!</button> |
transition
hover状態になった際の変化の速度を変えるには、
duration-xxx
（xxxはミリ秒）を使います。
| 1 | <button class="bg-blue-500 hover:bg-blue-700 duration-1000 text-white font-bold py-2 px-4 rounded">Click Me!</button> |
grid
grid-cols-x
（xは1行あたりのカラム数）を使います。
| 1 2 3 4 5 6 7 8 | <div class="grid grid-cols-3 gap-4"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <!-- 5〜8は省略 --> <div>9</div> </div> |
上の例では、3×3マスで1〜9の数字が表示されます。
Responsive
xx:yyyy
（xxは幅、yyyyは適用したいクラス）を使います。xxの部分は
sm
、
md
、
lg
、
xl
、
2xl
の中から選びます。
| 1 | <button class="bg-blue-500 md:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click Me!</button> |
設定ファイル
utility classに含まれていないカラーなど、独自の設定を追加することができます。
tailwind.config.js
に任意の設定を追加します。例えば、カラーにシアンを追加する場合は、以下のようになります。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: { colors: { cyan: '#9cdbff', } } }, variants: {}, plugins: [] } |
設定ファイルの変更後には、ビルドを行います。
$ npx tailwind build ./from_pass -o ./to_pass
Purge CSSの設定
Purge CSSで使用していないクラスを削減するように設定します。
| 1 2 3 4 5 6 7 | module.exports = { purge: [ './src/**/*.html', './src/**/*.vue', ], // 省略 } |
上記の場合、
src/**/
ディレクトリにある拡張子が
.html
か
.vue
ファイルを捜査して、使われていないクラスを削減してくれます。
更に細かい設定をすることができます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // tailwind.config.js module.exports = { purge: { content: [ './src/**/*.html', './src/**/*.vue', ], safelist: [ 'bg-blue-500', 'text-center', ] }, // ... } |
上記のような設定だと、捜査対象は一緒ですが、
bg-blue-500
と
text-center
がコードの中で使われていなくても、ビルド対象に含めることができます。これにより、関数の中でクラスを組み立てるようなケースでも、クラスが正しく反映されるようになります。
Vue.jsと組み合わせる
Vue.jsのプロジェクトで使用するには、Tailwind CSSをインストールし、
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
設定ファイルを作成し、
$ npx tailwindcss init -p
main.js
で生成したcssファイル（
./src/index.css
）を読み込むようにする必要があります。
| 1 2 3 4 | /* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; |
| 1 2 3 4 5 6 | // src/main.js import { createApp } from 'vue' import App from './App.vue' import './index.css' createApp(App).mount('#app') |
さいごに
Tailwind CSSの概要、Bootstrapとの比較、Vue.jsで使うための準備などについて紹介しました。
おすすめ書籍
