【Tailwind CSS】使い方まとめ ~入門からカスタマイズまで~【web制作#8】

はじめに
Tailwind CSS 使い方まとめ
おわりに

はじめに

今回はCSSフレームワークであるTailwind CSSについてのまとめを紹介していきます。

web制作でTailwind CSSを使う場合の使い方をまとめています。

CSSフレームワークについて何を選んだらいいか、Tailwind CSSについて興味あるかたは是非見てくださいね。

対象者

CSSフレームワークについて何を選べばいいか迷っている方
Tailwind CSSに興味のある方

それではTailwind CSSのまとめに移ります。

Tailwind CSS 使い方まとめ

Tailwind CSSの入門からカスタマイズまでの方法についてまとめました。

公式サイトはこちらから

Tailwind CSS

日本語版はこちらから。

Tailwind CSS (日本語)

少し長くなりましたので、セクションごとに記事に分けていますので気になった方は参照してみてください。

CDNで使い方を学ぶ

Tailwind CSSはそもそも何か、どういう書き方をするのか知りたい方はこちらを参照してください。

【Tailwind CSS】CDNで使い方を学ぼう

Tailwind CSSとはなにか知りたい方、CSSフレームワークに悩んでいる方にCDNを使ってTailwind CSSを使うやり方を説明していきます。Tailwind CSSのメリット・デメリットをまとめているので少しでも気になったら導入していただけると嬉しいです。

Tailwind CSSについてメリット・デメリットをまとめ、CDNで使う方法について紹介しています。

tailwind.config.jsを作成する方法

Tailwind CSSをカスタマイズするにはまずtailwind.config.js を作成しなければいけません。

tailwind.config.js の作成方法について知りたい方はこちらを参照してください。

【Tailwind CSS】tailwind.config.jsを作成しよう

Tailwind CSSがある程度使い慣れてきた方を対象に、npmでインストールして使う方法について紹介していきます。説明が長くなりそうなため今回はtailwind.config.jsを生成するまでを説明していきます。

tailwind.config.js を作成することで自分なりのカスタマイズができるようになります。

tailwind.cssをビルドして作成する方法

Tailwind CSSはtailwind.config.js をカスタマイズした後、ビルドを行ってtailwind.css を作成しなければいけません。

tailwind.css をビルドして作成する方法が知りたい方はこちらを参照してください。

【Tailwind CSS】tailwind.cssをビルドで生成しよう

Tailwind CSSをカスタマイズしたい方にTailwind CSSのビルド方法について説明していきます。ターミナルからビルドしてtailwind.cssを作成する方法、package.jsonでコマンドを登録してビルドする方法、configオプションを使用してtailwind.config.jsの場所を認識させる方法について説明します。

tailwind.css を作成してhtmlなどにクラスを付与すれば、ようやくカスタマイズしたTailwind CSSを使うことができるようになります。

purgeしてtailwind.cssを圧縮する方法

作成したtailwind.css をpurgeするやり方が知りたい方はこちらを参照してください。

【Tailwind CSS】purgeしてtailwind.cssを圧縮しよう

Tailwind CSSをカスタマイズしたい方にtailwind.cssをpurgeする方法について説明していきます。tailwind.config.jsのpurgeオプションを指定してpurgeする方法、環境変数を切り替えてpurgeする方法、gulpやwebpackなどを使ってpurgeする方法について説明しています。ご自身にあったpurgeのやり方を選んでみてください。

purgeすることで容量の大きいtailwind.css のファイルサイズを圧縮することができます。

おわりに

以上Tailwind CSSの導入から使い方のまとめを紹介しました。

いかがだったでしょうか。

CSSフレームワークについてどれを選んだらいいか悩んでいる方や、Tailwind CSSが気になっている方に少しでも興味を持っていただけたら嬉しいです。