Just in Timeモードというものがあり、 テンプレートで利用されているものだけを、事前にビルドして生成するモードです
ビルド時間の短縮とファイルサイズが最小になります
Tailwind CSS 3ではデフォルトで有効です
特徴
- CSSのクラス名を考えなくていい
- マークアップの画面でスタイリングできる（スタイルシートは書かない）
- CSSのサイズを小さくできる（使ったCSSだけバンドルされます）
- 基本的にはコンポーネントのデザインは自分で考えることになる（コンポーネントを提供してるサイトはあります）
- クラス属性の値がかなり多くなる
ブラウザサポートは、通常のCSS機能のサポートと同等です
Tailwind CLIツールを使用している場合、ベンダープレフィックスが自動的に追加されます
＊Reactのスタイリングと相性が良い
JSXのstyleプロパティを使う場合は擬似要素やメディアクエリを利用できませんが
Tailwind CSSではクラス名に修飾子をつけて擬似要素やウィンドウ幅に応じたスタイルを記述できます
インストールと初期設定（Tailwind CLI）
#package.json作成
npm init -y
#tailwindcssインストール
npm install -D tailwindcss
#設定ファイルの作成
npx tailwindcss init開発用のフォルダ（src）と公開用のフォルダ（pubic）を作成します
public/index.htmlを作成（公開フォルダにバンドルされたスタイルシートへのリンクを追加）
src/style.cssファイルを作成してTailwindの各レイヤーのディレクティブを追加します
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind CSS 3での設定ファイル（tailwind.config.js）編集です
＊注意：ver2と一部異なります
余談：npx tailwindcss init --full（初期設定ありのファイルがインストールされるので、インストールしてファイル名だけ変更すると、設定時の参考になります）
module.exports = {
//Tailwindクラス名を含む、HTML、JSコンポーネントの全てのパス
//Tailwindクラス名を含むプロジェクト内のすべてのファイルについて知る必要があります
content: [
"./src/**/*.{html,js}",
"./public/**/*.html"
],
//プロジェクトのカラーパレット、フォント、ブレークポイントなどを定義できます
theme: {
extend: {},
},
plugins: [],
}package.jsonのscriptを編集します
＊buildは、本番用に–minifyフラグを追加することでCSSを縮小できます
"scripts": {
"watch":"tailwindcss -i ./src/style.css -o ./public/style.css --watch",
"build":"tailwindcss -o ./public/style.css --minify"
},＊PostCSSプラグインとしてインストールすることもできます（webpackを使うときなど）
参考：https://tailwindcss.com/docs/installation/using-postcss
ViteでVue3のプロジェクト
＊tailwindcss postcss autoprefixerインストール
npm init vite プロジェクト名
cd プロジェクト名
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pmodule.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}@tailwind base;
@tailwind components;
@tailwind utilities;//追加
import './index.css'＊VStudioCode用の公式の拡張機能：TailwindCSSIntelliSense
カスタマイズ
tailwind.config.jsのthemeで、プロジェクトのカラーパレット、フォント、ブレークポイントなどを定義できます
extendの中に追加した場合は、デフォルトの設定に追加します（例：brown-light）
extendの外にに追加した場合は、デフォルトの設定を上書きします
theme: {
extend: {
colors: {
brown: {
light: '#fdf8f6',
},
}
},
},
theme: {
colors: {
},
},＊ちなみにVer3からは、全てのカラーがデフォルトで使用できます
参考：Googleフォントを追加する場合
GoogleフォントのimportのURLをsrc/style.cssファイルの先頭に貼り付け、
「tailwind.config.jsのtheme」に、fontFamily:{ }を追加します
@applyで再利用する 新しいクラスを作ることができます
例：btn-primaryというクラス名が使えるようになります
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}@tailwind base
ベースのスタイルでは、「見出しはスタイルなし・リストはスタイルなし・画像はブロックレベル・ボタンにはデフォルトのアウトラインがあり」などです
基本スタイルを追加したい場合は、@layer baseディレクティブ内でそれらをCSSに追加します
@layer base {
h1 {
@apply text-2xl;
}
a {
@apply text-blue-600 underline;
}
}修飾子（レスポンシブ等）
ブレークポイント
＊指定されたブレークポイント以上でのみ有効（min-width）
module.exports = {
theme: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
}
}
}768px以上はbg-red-500（背景色が赤）、1024px以上はbg-green-500（背景色が緑）
<div class="bg-pink-500 md:bg-red-500 lg:bg-green-500">疑似クラスを使う時の、ホバー（:hover）、フォーカス（:focus）など修飾子のクリックリファレンス
::before と ::after
＊自動的に追加content: ''が追加されます
別の値を追加するときは
<span class="after:content-['*']">コンポーネントなどの参考URL
公式サイトのコンポーネント集、鍵マークがないものは無料でコードを確認できます
BLOGやCONTACTなど、HEADERやFOOTERのレイアウト
ButtonやAlertやCardなどのコンポーネント
メモ
containerクラスは、要素の現在のブレークポイントのmax-widthと一致するように設定されます
中央に寄せるmx-autoが必要です
横幅にパディングをつけるpx-
<div class="container mx-auto px-4">
<!-- ... -->
</div>配置された要素の配置（top・right・bottom・left・inset）
ページ内スクロールにスムーススクロールを実装できます
<html class="scroll-smooth">
<!-- ... -->
</html>画像やカード型のコンテンツをレンガ状に敷き詰めて配置するMasonryレイアウト
＊デフォルトで2カラム、768pxで3カラム、1024pxで4カラム
<div class="columns-2 md:columns-3 lg:columns-4">
<!--.mb-4で下マージン-->
<img class="mb-4" src="">
<img class="mb-4" src="">
<img class="mb-4" src="">
....
</div>下記のようなサイトから、SVGコードをコピペして、SVGアイコンのスタイリング用のクラスを追加