こんにちは。エキサイトでデザイナーをしている齋藤です。
Tailwind CSSのメンテナーの一人のAdam Wathan氏は、日本時間の1月16日に自身のXにおいて、「Tailwind CSS v4.0安定版は来週リリース予定」と発表しました。
Tailwind CSS v4.0 stable will be out next week 🤝🏻
— Adam Wathan (@adamwathan) January 16, 2025
予定通りであれば、今週中にTailwind CSS v4が正式にリリースされるようです。
大きな変更点として、tailwind.config.jsが廃止され、CSSファイルで設定を行うようになることがあります。
今回は、v3からv4でテーマ設定の方法がどう変わるかについて、代表的なスタイル要素を例にご紹介します。
免責
この記事でご紹介する内容は、2025年1月20日時点のTailwind CSS v4.0 Betaに準じており、安定版での動作を保証するものではありません。
Tailwind CSS v4ベータ版の準備
今回はベータ版にて検証をします。
まずは、Tailwind CSSとCLIのベータ版をインストールします。
npm install tailwindcss@next @tailwindcss/cli@next
次に、設定を書くCSSファイル（app.css）を作成し、Tailwind CSSをインポートします。
@import "tailwindcss";
最後に以下を実行すると、設定を書くCSSファイル（app.css）をもとに、最終的なCSSファイル（gen-output.css）が生成されます。
npx @tailwindcss/cli -i app.css -o gen-output.css
※ローカル環境でwatchしたい場合は、末尾に--watchを付けると差分を検知してリアルタイムにCSSを生成できます。
テーマ設定とは？
Tailwind CSSはカラーや角丸の値などの基本のデザイン要素が標準で定義されています。
これらのカスタマイズをテーマ設定と呼びます。
v3ではtailwind.config.jsにて設定しましたが、v4からはCSSファイルになります。
v3からv4でのテーマ設定方法
今回は以下のスタイル要素の設定方法がどう変わるかをご紹介します。
- カラー
- タイポグラフィ
- 角丸
- ボックスシャドウ
- ブレイクポイント
カラー
v3での設定方法
v3ではtheme.colorに定義をしました。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
color: {
'black': '#020617',
}
}
}
v4での設定方法
v4ではプレフィックスcolorを付けて、CSS変数形式で定義します。
@import "tailwindcss"; @theme { --color-black: #020617; }
結果
<!-- colorが#020617になる --> <p class="text-black">...</p>
タイポグラフィ
v3での設定方法
v3ではtheme.fontSizeに定義をしました。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
fontSize: {
'base': ["1rem", { fontWeight: "400", lineHeight: "1.8", letterSpacing: "0.02em" }],
}
}
}
v4での設定方法
v4ではプレフィックスtextを付けて、CSS変数形式で定義します。
ユーティリティクラスのtext-*にフォントサイズに加えて、font-weight、line-height、letter-spacingの値も含めたい場合は、--text-*に--font-weightの形式で続けると関連付けされます。
@import "tailwindcss"; @theme { --text-base: 1rem; --text-base--font-weight: 400; --text-base--line-height: 1.8; --text-base--letter-spacing: 0.02em; }
結果
<!-- font-sizeが1rem、font-weightが400、line-heightが1.8、letter-spacingが0.02emになる --> <p class="text-base">...</p>
角丸
v3での設定方法
v3ではtheme.borderRadiusに定義をしました。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
borderRadius: {
lg: '1rem'
}
}
}
v4での設定方法
v4ではプレフィックスradiusを付けて、CSS変数形式で定義します。
@import "tailwindcss"; @theme { --radius-lg: 1rem; }
結果
<!-- border-radiusが1remになる --> <div class="rounded-lg">...</div>
ボックスシャドウ
v3での設定方法
v3ではtheme.boxShadowに定義をしました。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
boxShadow: {
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.03)',
}
}
}
v4での設定方法
v4ではプレフィックスshadowを付けて、CSS変数形式で定義します。
@import "tailwindcss"; @theme { --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03); }
結果
<!-- box-shadowが0 1px 2px 0 rgb(0 0 0 / 0.03)になる --> <p class="shadow-sm">...</p>
ブレイクポイント
v3での設定方法
v3ではtheme.screensに定義をしました。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
'sm': '480px',
}
}
}
v4での設定方法
v4ではプレフィックスbreakpointを付けて、CSS変数形式で定義します。
@import "tailwindcss"; @theme { --breakpoint-sm: 480px; }
結果
<!-- 画面が480px以上のときにcolorがred-500になる --> <p class="sm:text-red-500">...</p>
注意: v4からはmax-width指定はmax-*でclassとして指定が推奨されています
v3では 'sm': { max: '480px' },のように、ブレイクポイントをmax-widthで指定できました。
v4のCSSファイルでの設定でのmax-widthの指定をせずに、スタイリング時にmax-*の形式で指定することが推奨されます*1。
<!-- (width < {smの値})になる --> <p class="max-sm:text-red-500"></p>
まとめ
今回は、v3からv4でテーマ設定の方法がどう変わるかについて、代表的なスタイル要素を例にご紹介しました。
v4からはJSを一切書かずにCSSファイルだけでテーマ設定が可能になることで、導入や運用のハードルが下がるかと思われます。
v4の詳しい変更内容は、公式ドキュメントをご覧ください。
Tailwind CSSを使用される方の一助となれば幸いです。
ご精読ありがとうございました。
