FrontEnd

Tailwind CSSの基礎とVue.jsへの導入

投稿日:

はじめに

よく使われるCSSフレームワークの一つであるBootstrapは、フロントエンド開発にRreactやVue.jsが用いられることが多くなった昨今では、あまり使用されなくなってきているようです。代わりに、Tailwind CSSの採用が増えてきているようなので、概要とBootstrapとの違いについてまとめてみようと思います。

Tailwind CSSとは

Tailwind CSSはUtility FirstをコンセプトとしたCSSフレームワークです。このコンセプトでは、コンポーネントではなく、utility classを用いてページをデザインしていきます。

utility class

utility classを用いた場合とコンポーネントを用いた場合で、どのような違いが有るか、コンポーネント側の例としてBootstrapと比較して説明します。

Bootstrapでボタンを表示する際は以下のようなコードになります。

一方、Tailwind CSSを用いた場合だと、以下のようなコードになります。

このように、Bootstrapでは、 btn というコンポーネントが定義されていて、それを適用しますが、Tailwind CSSでは、classを自分で組み合わせてボタンを作る必要があります。

Bootstrapとの比較

ここでは、柔軟性、コード量、学習コスト、ファイルサイズ、その他について、Bootstrap比較してみます。

柔軟性

デザインの柔軟性では、Tailwind CSSのほうが優れています。Bootstrapで標準で用意されているのは、塗りつぶしたボタンか、アウトラインのボタンのどちらかで、角丸の大きさの調整など、細かな調整にはひと手間かかります。

一方、Tailwind CSSでは、色、フォントの太さ、ホバー時の変化など、クラスを組み合わせることで好きなボタンを表現することができます。

コード量

コード量は、Bootstrapの方が少なくなります。utility classの説明で例にあげたように、Bootstrapでは、 btnbtn-primary を書くだけですが、

Tailwind CSSでは、たくさんのクラスを書く必要があります。

ただし、Tailwind CSSには@applyという書き方で、Tailwind CSSのクラスをまとめた独自のclassを定義することができるので、短い記述で済ませることもできます。

学習コスト

学習コストは、体感ですが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は適用したいクラス)の形で書きます。

transition

hover状態になった際の変化の速度を変えるには、 duration-xxx (xxxはミリ秒)を使います。

grid

grid-cols-x (xは1行あたりのカラム数)を使います。

上の例では、3×3マスで1〜9の数字が表示されます。

Responsive

xx:yyyy (xxは幅、yyyyは適用したいクラス)を使います。xxの部分は smmdlgxl2xl の中から選びます。

設定ファイル

utility classに含まれていないカラーなど、独自の設定を追加することができます。

tailwind.config.js に任意の設定を追加します。例えば、カラーにシアンを追加する場合は、以下のようになります。

設定ファイルの変更後には、ビルドを行います。

$ npx tailwind build ./from_pass -o ./to_pass

Purge CSSの設定

Purge CSSで使用していないクラスを削減するように設定します。

上記の場合、 src/**/ ディレクトリにある拡張子が .html.vue ファイルを捜査して、使われていないクラスを削減してくれます。

更に細かい設定をすることができます。

上記のような設定だと、捜査対象は一緒ですが、 bg-blue-500text-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 )を読み込むようにする必要があります。

さいごに

Tailwind CSSの概要、Bootstrapとの比較、Vue.jsで使うための準備などについて紹介しました。

おすすめ書籍

Vue.js 3 超入門 JavaScript: Master the World's Most-used Programming Language CSS設計完全ガイド ~詳細解説+実践的モジュール集

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

フォロー

blog-page_side_responsive

2021年7月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。