FlaskでTailwindCSSを導入する方法解説！Node.jsは必要なし
2024年7月4日
こんにちは。
今回の記事では、FlaskでTailwindCSSを使う方法を解説します。
TailwindCSSとは、ユーティリティクラス(utility class)を自由に組み合わせて活用し、よりオリジナリティの高いデザインのWebサイト及びWebアプリケーションを作成可能なCSSフレームワークです。
TailwindCSSを使うことで、簡単にFlaskのフロントエンドを構築することが可能です。
また、Node.jpやnpmの設定なしで使える方法も解説します。
FlaskでTailwindCSSを導入する方法
FlaskでTailwindCSSを使うためには、TailwindCSSのCDNを使いましょう。
TailwindCSSのCDNをHTMLのヘッダーに記入
実装方法は、TailwindCSSのCDNをHTMLのヘッダーに記入します。
<!DOCTYPE html>
<htm>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
・・・
</html>
これでTailwindCSSを使う準備は完了です。
classを指定してTailwindCSSが使えるか確認する
最後に、class名を付けてTailwindCSSが使えるか確認しましょう。
<!DOCTYPE html>
<htm>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-red-800">text red</p>
</body>
</html>text-red-800は、文字の色を赤色(rgb(153 27 27))に変更するクラスです。
“text red”という文字列が赤色になれば成功です。
CDNでTailwindCSSを使うデメリット
CDNを使うことで、簡単にTailwindCSSを設定することができます。
しかし、CDNならではのデメリットもあるので、理解しておきましょう。
- カスタマイズの制限
- パフォーマンスの低下
- オフラインでの利用不可
カスタマイズの制限
CDN版では、プロジェクトごとにTailwindCSSの設定ファイル（tailwind.config.js）を使ってカスタマイズすることが難しいです。
そのため、プロジェクト特有のカスタムテーマやユーティリティクラスを追加するのが困難になります。
カスタマイズしたい場合は、Node.jsとnpmでインストールするか、別のCSSフレームワークを使うことをおすすめします。
パフォーマンスの低下
CDNを利用すると、初回ロード時にパフォーマンスが低下する可能性があります。
TailwindCSSは大量のユーティリティクラスを提供するため、すべてを含んだCSSファイルはある程度の容量になります。
オフラインでの利用不可
CDNを介して外部リソースを読み込むため、CDN側の障害やセキュリティリスクがプロジェクトに影響を与える可能性があります。
例えばCDNがハッキングされて、サーバーがダウンした場合、TailwindCSSが動かなくなります。
このようなデメリットがあるので、FlaskにTailwindCSSを実装する場合は、どのように実装するのかを検討しましょう。
参考リンク
まとめ
今回の記事では、FlaskにTailwindCSSを導入する方法について解説しました。
CDNを利用すると、簡単に実装することが可能です。別途Nodeサーバーなどを準備する必要がないため、手間がありません。ただ、CDNを使うデメリットもいくつかあるので、メリット・デメリットを理解しておきましょう。
今回の記事がWeb開発のお役になれば幸いです。
ここまでお読みいただきありがとうございました。
インフラの学習はInfraAcademy
Flaskの学習はFlask WebAcademy
おすすめの記事
