Tailwind CSSとは？初心者向けに開発に使うメリットを簡単に解説
スポンサードリンク
おはようございます。Shotaです。
🤨「Tailwind CSSが最近はやっているけどわからない....」
🤨「Tailwind CSSとBootstrapはどう違うんだ？」
本記事にたどり着いた人の中には、このようなことを考えている人も少なくないと思います。
そこで、本記事ではTailwind CSSについて徹底解説していきます。それでは早速、本題に入りましょう。
Tailwind CSSとは？
Tailwind CSSとは、Utility First(ユティリティ ファースト)をコンセプトに設計されたCSSフレームワークです。オープンソースで、無料で誰でも使えます。コンポーネントの代わりにユティリティクラス(Tailwind CSSが提供しているクラス)を使うことで、レイアウトやボタンの配置を細かく設定できるようになります。その点で、カスタマイズ性に優れていると言えるでしょう。
柔軟にカスタマイズできるので、WEB開発で注目されています。クラスを追加するだけでスタイリングできるので、効率的にコーディングできます。
Tailwind CSSのメリット
コードの記述量を削減できる
まず、コードを閣僚を減らせるのがメリットです。そうするろ、短時間で自分好みのデザインを実現できます。それだけではなく、コードがシンプルで読みやすいのでメンテナンス性も向上します。
デザインシステムを構築できる
Tailwind CSSでは各クラスで大まかなデザインを決められています。例えば、フォントサイズはクラスによって「とても小さい」、あるいは「とても大きい」など大まかにサイズを変更できます。CSSのようにフォントサイズを0.1remごとに設定する必要がないので、チーム内でサイズを統一しやすくなります。その結果、意思決定コストを下げられるのです。
柔軟にカスタマイズできる
Tailwind CSSには拡張やコントロールするためのプロパティが標準で備わっているので、柔軟にカスタマイズできます。
レスポンシブに簡単に対応できる
Tailwind CSSでは画面サイズに応じてレイアウトや画像を柔軟に変更できるので、非常に便利です。
スタイルの変更をHTML上で行える
スタイルの変更をHTML上でできるのもメリットの一つです。HTMLファイルとCSSファイルを行き来する必要がないので、作業効率アップが期待できるでしょう。
Tailwind CSSとBootstrapの違い
Bootstrapは、デザインされたコンポーネントを提供してくれる最も人気のあるフレームワークです。CSSファイルやデザインに動きを加えるJavaScriptファイルが作成されており、ルールに沿って作ることで高品質のデザインを実現できます。Bootstrapは、動きをつけたい場合でもJavaScriptの知識が不要な一方、Tailwind CSSはユティリティクラスが準備されているだけなので、動きをつける場合はJavaScriptで一から実装する必要があります。
また、BootstrapはCSsの知識が不要な一方、Tailwind CSSはクラスが当てはまるCSSプロパティを調べることが多いので自然にCSSの知識が身につきます。
Tailwind CSSのインストール方法
Tailwind CSSをインストールする方法はCDN経由とnpmの２種類があります。
CDN経由
HTMLファイルのヘッダー部分に下記のコードを挿入するだけです。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
npm経由
コマンドラインツールを起動して、以下のコマンドを入力してください。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
まとめ
今回の記事では、Tailwind CSSの概要とメリット、インストールする方法を簡単に紹介しました。Tailwind CSSは優秀なフレームワークです。今後、WEB開発で登場する機会が増えるので、この機会にTailwind CSSを習得してみてはどうでしょうか？
今回の記事はこれで終了です。
【参考サイト】
