重い腰を上げて（大型アップデートの時はいつもこう）、Astro製の当ブログのTailwindCSSをv3からv4にアップデートした。
TailwindCSSのv4ではViteプラグインが導入されたので、単純に今までのインテグレーション@astrojs/tailwindをアップデートするのではなく、Vite版に変更する作業を行う。
プラグインのインストールとアンインストール
@tailwindcss/viteをインストールする。
npm install tailwindcss @tailwindcss/vite今まで使用していた@astrojs/tailwindはアンインストールする。
npm rm @astrojs/tailwindastro.config.mjsの修正
astro.config.mjsを以下のように変更する。
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
integrations: [
tailwind(),
...
],
vite: {
plugins: [
tailwindcss(),
],
});importするプラグインを@astrojs/tailwindから@tailwindcss/viteにintegrationからtailwind()を削除vite.pluginにtailwindcss()を指定する
postcss.config.cjsの修正
TailwindCSS v3では、tailwindcssパッケージはPostCSSのプラグインだったが、v4では専用の@tailwindcss/postcssパッケージに移動した。
さらに、TailwindCSS v4はインポート処理とベンダープレフィックスの追加を自動で行ってくれるので、postcss-importとautoprefixerは不要となる。プロジェクトで使用している場合は削除する。
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
"@tailwindcss/postcss": {},
},
};CSSの修正
tailwindcssのインポート（必須）
サイト全体で読み込んでいるCSSにTailwindCSSをインポートする。
@import "tailwindcss";tailwind.config.mjsの設定を移行
v4ではtailwind.config.mjsが不要になったので、テーマ拡張など独自でカスタマイズしている場合は設定を移行する必要がある。
当ブログのTailwind CSSの設定は以下（一部省略）。
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
theme: {
extend: {
container: {
center: true,
padding: {
DEFAULT: "1rem",
},
},
fontSize: {
"3xl": "1.75rem",
},
},
},
darkMode: "class",
};
ユーティリティ設定の移行
@utilityディレクティブで拡張する。
@utility container {
margin-inline: auto;
padding-inline: 1rem;
}contentオプションの移行
source()関数を使って指定する。
@import "tailwindcss" source('./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}');
テーマの拡張
@themeでCSS変数を定義して上書きする。フォントサイズの場合は--text-*の形式になる。
@theme {
--text-3xl: 1.75rem;
}Google Fontsを使う場合
ファイルの一番上（tailwindcssよりも上）で@importで読み込み、@themeで拡張する。デフォルトのスタイルを指定する場合は、--font-<font-name>の後ろに--で追加する。
@import url("https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap");
@import "tailwindcss";
@theme {
--font-quicksand: "Quicksand", sans-serif;
--font-quicksand--font-optical-sizing: auto;
}class名font-<font-name>でスタイルが適用される。
<h1 class="font-quicksand">タイトル</h1>ダークモードの設定
@variantディレクティブで指定する。
@variant dark (&:where(.dark, [data-theme="dark"]))手っ取り早く移行したい場合
tailwind.config.mjsをグローバルCSSに読み込む方法もある。
@config "../../tailwind.config.mjs";ただ、バージョンを重ねていくにつれていずれ廃止されるような気がするので、設定内容は新形式に移行しておいた方がよいのではないかと思う。
classの修正
廃止になったclassやリネームになったclassがあるので、必要に応じて修正する。
Removed deprecated utilities
Renamed utilities
当ブログは幸い1ヶ所の修正で済んだのでよかった。
