【初心者向け】Tailwind CSSの基礎について簡単に解説
TailwindCSSとは
TailwindCSSはCSSライブラリの一種です。百聞は一見に如かずなので、まずはTailwindCSSを用いたマークアップの書き方をご覧いただければと思います。
<div class="text-sm font-bold">hello</div>
ここでは、helloという文字列を太字で書いただけです。
上記のクラスは、それぞれ以下のCSSに対応しています。
.font-bold
font-weight: 700;
.text-sm
font-size: 0.875rem;
line-height: 1.25rem;
ちなみに、TailwindCSSのクラスと実際のCSSの対応は、チートシートで確認できます。
TailwindCSSはこのように、.font-bold, .font-smなどのユーティリティクラスを用いてスタイリングします。このような設計思想のことをユーティリティファーストと呼び、これがTailwindCSSの最大の特徴です。
TailwindCSSのメリット
TailwindCSSのメリットは以下のとおりです。
クラス名を考える必要がない
すでにTailwindCSSで名前が決まっているユーティリティクラスを用いるので、いちいちクラス名を考える必要がありません。クラス名を新たに定義せずにスタイリングできるというのは、とても画期的です。
HTMLとCSSを交互に見る必要がない
HTMLとCSSが分かれていると、それらを交互に見ないといけないので、目線をあちこちに移さないといけなくて大変でした。ですが、TailwindCSSはHTMLに全てのユーティリティクラスを設定するため、目線が散らばりません。
TailwindCSSのデメリット
HTML部分が見にくくなる
当然ですがHTML部分に大量のクラスが書かれるので、HTML部分が複雑化してしまうことです。
TailwindCSSの導入方法
以下の公式ドキュメントに沿って導入していってください。
TailwindCSSの導入方法
TailwindCSSのカスタマイズ
ユーティリティクラス以外を用いて、カスタマイズしたい時もあります。そういった設定を書くためのファイルがtailwind.config.tsです。
tailwind.config.ts
export default {
content: ['./src/**/*.vue', './src/**/*.ts'],
theme: {
colors: {
purple: "#3f3cbb"
},
}
}
content
contentは、TailwindCSSのクラスを使うファイルを設定します。上記の例では、srcディレクトリ配下のvueファイルとtsファイルが対象になります。
theme
themeはTailwindCSSの中でも特に重要なプロパティです。themeでは色や文字サイズなど様々な項目をカスタマイズできます。例えば、TailwindCSSではbg-red-500のようなユーティリティクラスがありますが、themeではそれをカスタマイズできます。
上記のtailwind.config.tsの例では、text-purple, bg-purpleなどのクラスを使用できるようになります。
また、以下のようにすれば、より詳細なカスタマイズもできます。
tailwind.config.ts
export default {
content: ['./src/**/*.vue', './src/**/*.ts'],
theme: {
colors: {
purple: {
100: "#3f3cbb",
// 以下、同様に好きなカラーコードを設定できます。
200: "......",
300: "......",
400: "......",
500: "......",
600: "......",
700: "......",
800: "......",
900: "......",
}
},
}
}
他にも様々な設定ができますので、気になる方は公式ドキュメントをご覧ください。
公式ドキュメント
vscodeの拡張機能について
vscodeの拡張機能としては、TailwindCSS IntelliSenseというものがあります。これを使うとクラス名を自動保管してくれるので便利です。
参考
まとめ
TailwindCSSを使うと、非常に快適にCSSを当てることができるようになります。是非活用してみてください。
Xについて
僕のXアカウントでは、主にweb開発、AI、会社経営のノウハウについて発信しています。もし興味があれば、フォローしていただけると嬉しいです。
プログラミング学習サポート&キャリア相談について
プログラミング学習サポート&キャリア相談も始めました。興味のある方はこちらから詳細をご覧ください。
Discussion