はじめに
今回はTailwind CSSをCDNで使う方法を説明していきます。
どのcssフレームワークを使おうか悩んでいる方に見ていただきたい内容になっています。
参考サイトが豊富にあるため、初心者の方にもおすすめします。
まとめはこちらを参照してください。
それではTailwind CSSの説明に移ります。
Tailwind CSSとは
こちらが公式サイトです。
日本語版はこちらから。
Tailwind CSSは何種類かあるcssフレームワークの一種です。
cssフレームワークとは、ボタンやフォームといった機能のベースとなるcssをたくさん用意した便利css集のことをいいます。
設計者はそのcssで記述されたclassを付与していけば簡単にデザインができるということです。
ただしTailwind CSSは他のcssフレームワークと以下の異なる特徴があります。
プロパティというのはdisplay:flex;やtext-align:center; などのひとつひとつのスタイリングのことですね。
Tailwind CSSの記述の方法は以下のようになります。
See the Pen BapvvgV by shuu11 (@shuu11) on CodePen.
あまり見慣れない書き方かもしれませんが、設計者はhtml側の記述だけでボタンのデザインが完成してしまいます。
CDNで使ってみよう
Tailwind CSSとその記述方法について説明しました。
それでは実際にCDNでTailwind CSSを使用できるようにしましょう。
以下を<head>タグ内に記述しましょう。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">以下のような記述をしてボタンが表示されれば正しく読み込めています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<a href="#" class="inline-block bg-red-200 hover:bg-red-400 py-2 px-6 rounded-full shadow-md">
ボタン1
</a>
</body>
</html>
メリット・デメリット
CDNで使う方法について説明しました。
続いてTailwind CSSのメリットとデメリットについて簡単にまとめていきます。
メリット
cssの記述不要
必要なcssはフレームワークが準備してくれているのでcssの記述が必要ありません。
そもそもcssファイル画面を開く必要がないので画面を広く使うことができます。
class名の命名コスト不要
設計しているとclass名の付け方に悩む経験をされたことがあると思います。
Tailwind CSSでは用意されたcssをhtmlのclassに付与するだけでいいのでclass名に悩む必要がありません。
スタイル変更の影響範囲が最小
スタイルを変えたい場合はcssを修正しますが、想定外の箇所でデザインの崩れが発生することがあります。
Tailwind CSSはclass名の追加・変更だけで済むので影響範囲が限定的になります。
デメリット
学習コストがかかる
cssフレームワークなので当然ですが、用意されたcss名をある程度把握しなければいけません。
とはいってもどんなプロパティなのかイメージしやすいcss名となっているので2,3日あればざっくりと把握できるようになります。
cssの容量が膨大
プロパティ1つ1つにcssが割り当てられているのであれば、当然cssの量が膨大になります。
v2.1.2でビルドしてみたところなんと「3.81MB」もありました。
PS C:\Users\...\test> npx tailwindcss-cli@latest build ./tailwind.css -o ./css/tailwind.css
tailwindcss 2.1.2
🚀 Building: tailwind.css
✅ Finished in 4.43 s
📦 Size: 3.81MB
💾 Saved to css/tailwind.cssこのままではとても実務では使えませんが、purgecssというプラグインが組み込まれているのでそちらを使うと数KBまで削減できるので大きな問題はありません。
purgecssというのは使っていないcssを削除して容量を削減するプラグインになります。
class名が多くなる
こちらが唯一の大きなデメリットでしょうか。
何度かコードを紹介していますが、html側でclassを付与してスタイリングする性質上どうしてもclass名が多くなります。
<a href="#" class="inline-block bg-red-200 hover:bg-red-400 py-2 px-6 rounded-full shadow-md">
ボタン1
</a>ただ他の大きなメリットを考慮すれば些細なデメリットかもしれませんね。
おわりに
Tailwind CSSをCDNで使う方法を説明していきました。
いかがだったでしょうか?
使い慣れるとweb制作時の強い味方になるのでこの機会に導入していただけるとうれしいです！
次回はTailwind CSSの学習に便利なサイトを紹介していきます。
コメント