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


関連記事

[React]MUIのコンポーネントを使用したUI作成(Button、Alert編)

1 はじめに2 MUI3 Button3.1 Buttonの実装3.2 Buttonの使い分け3.2.1 不可逆な操作など、より強調したい時の使い方4 Alert4.1 Alertの実装4.2 Ale ...

laravel logo

Inertia使ってみた②

1 はじめに2 フォームヘルパー2.1 ポイント2.2 他機能3 ローディング表示4 さいごに5 おすすめ書籍 はじめに 前回はInertiaの基本的な内容について書いてみました。今回はもう少し実践的 ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

フォロー

blog-page_side_responsive

2021年7月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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