今回は最近流行りのCSSフレームワークである「TailwindCSS」について超簡単にまとめてみました！
とりあえずちょっと基本的な記述だけでも試したいという場合は本記事だけでも動作確認可能です。
ただ、事前にテキストエディター（VScode）などの知識があるとスムーズに実装できると思います。
CSSフレームワークは使いやすくまとめたもので、「Bootstrap」とよく比較されることが多いCSSフレームワークだと思います。
「TailwindCSS」はユーティリティファーストという設計思想を持っており、ユーティリティクラスを組み合わせることでデザインを仕上げていきます。
「Bootstrap」とは違い、事前にコンポーネントが定義されていません。
使い心地も、読みやすく汎用性が高いフレームワークです。
使い方はBootstrapのように決められたスタイルの記述をclassとして付与していく感じで、意味のあるclass名で予測がしやすくコーディングスピードの短縮につながります。
割と自由度が高いフレームワークとされてます。
基本的に使う記述は、公式サイトのドキュメントで調べながら適用していくようです。
公式サイト
https://tailwindcss.com/
使用方法は、CDNを付与する方法と環境構築して使う方法とありますが
今回は手軽に実装したいのでCDNを使っていきます。
TailwindCSS CDN
<script src="https://cdn.tailwindcss.com"></script>
こちらをbodyタグ直前に貼ることで動作します。
ただ、軽量ではないため時間に余裕があるのであれば環境構築をして利用する方法のほうがオススメです。
また、VScode（Visual Studio Code）で使用していく場合にオススメの拡張機能があります。
それがこちらで入力補完機能などがあります。
また、こちらと合わせて動作させるのに必要な特殊なファイルがありまして
同じ階層かもしくはjs用のフォルダに「tailwind.config.js」という名称で空のファイルを作成する必要があります。
あとは必要に応じて必要なCSSをclass名で付与していくイメージです。
適用させるスタイルの調べ方ですが
例えば、テキストカラーを調べたい場合
公式のDocsから左メニューの「Colors」をクリックするとテキストカラーのスタイル名が一覧表示されます。
例えば、classに「text-red-500」などと記述するとテキストが赤になります。500の部分が色の濃さで
600など数値を上げると濃くなり、400とかだと薄くなります。
<h1 class="text-red-500">Sample</h1>
他にも
マージン
-m-0 //0px;
mx-1 左右
my-4 上下
ml-10 //margin-left: 2.5rem;
※paddingも同じような感じで頭のmの箇所をpにするだけ
Flexbox
flex コンテーナーとなる
flex-row 横並び
flex-col 縦並び
justify-end 右揃え
justify-start 左揃え
justify-center 中央揃え
justify-between 両端配置
justify-around 均等配置
レスポンシブデザイン
max-sm min-width: 640px;
max-md min-width: 768px;
max-lg min-width: 1024px;
max-xl min-width: 1280px;
max-2xl min-width: 1536px;
このような感じで必要なスタイルを調べていきます。
まとめ
ひとまず超ざっくりまとめてみましたが、使い方に慣れが必要ですが
かなり簡単にWebサイトにスタイルを適用できます。
まだまだ随時追記していく予定です。
