真・フランス料理紹介ブログ
tailwind v4への移行
2025-06-19

tailwind v4が公開された（半年前だけど）
Tailwind CSS v4.0
重い腰を上げてこのブログも移行する

関係する諸々のライブラリ:
daisyui
@tailwindcss/typography

基本的にはupgrade guideに従う

下記ツールで自動的にアップグレードしてくれるらしい

$ npx @tailwindcss/upgrade

が、どうやらモノレポ構成では動かない様子

リポジトリ内のnext用ディレクトリを一旦別ディレクトリにコピー、
元のリポジトリルートの.gitignoreも持ってくる、
新規でgit init

ここでコマンド叩いて差分を元リポジトリに反映させる方針

が、このissueが再現して動かん

$ npx @tailwindcss/upgrade

TypeError: Cannot read properties of undefined (reading 'flatMap')

言及の通り、下記コマンドでやり直し

$ npx @tailwindcss/upgrade@latest

daisyuiが古いままだとこれもまた動かん

$ npx @tailwindcss/upgrade@latest

🌼   daisyUI 4.12.24
│ ↳ Could not load the configuration file: `addUtilities({ '@media (min-width: 640px)' : … })` defines an
│   invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg.
│   `.scrollbar-none`.

これはバージョン上げるだけ

$ npm i -D daisyui@latest

完了
差分はこれだけ

$ git status -s
 M app/components/svg/hatebu.tsx
 M app/components/svg/moon.tsx
 M app/components/svg/twitter.tsx
 M app/globals.css
 M app/layout.tsx
 M package-lock.json
 M package.json
 M postcss.config.mjs

.tsxに関してはクラス名の変更が自動修正されただけ
重要なのはglobals.cssで、
従来tailwind.config.tsで設定していた諸々がcssファイル側に集約されてるっぽい

$ nvim app/globals.css

@import 'tailwindcss';

@config '../tailwind.config.ts';

いやぜんぜんまだ参照しとるやないか
どうやらtailwind.config.ts内のthemeやplugin等は移行してくれない様子

tailwind.config.tsを消す方向に、ここから手で修正していく

プラグイン類はcss側でインポート

@plugin "daisyui";
@plugin "@tailwindcss/typography";

themeはガイド参照しつつ移行

@theme {
    --color-iceberg-dark: #161821;
    --color-iceberg-light: #e8e9ec;
    --breakpoint-3xl: 1800px;
    --breakpoint-4xl: 2460px;
}

最終的に↓のtailwind.config.tsは

import typography from "@tailwindcss/typography";
import daisyui from "daisyui";
import type { Config } from "tailwindcss";

export default {
    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
    theme: {
        extend: {
            colors: {
                "iceberg-dark": "#161821",
                "iceberg-light": "#e8e9ec",
            },
            typography: {
                DEFAULT: {
                    css: {
                        maxWidth: "none",
                        h1: { color: "none" },
                        h2: { color: "none" },
                        h3: { color: "none" },
                        h4: { color: "none" },
                        h5: { color: "none" },
                        h6: { color: "none" },
                        p: { color: "inherit" },
                        a: { color: "inherit" },
                    },
                },
            },
            screens: {
                "3xl": "1800px",
                "4xl": "2460px",
            },
        },
    },
    darkMode: "class",
    plugins: [typography, daisyui],
} satisfies Config;

以下のcssになる

@import "tailwindcss";
@plugin "daisyui";
@plugin "@tailwindcss/typography";

/* バリアントを作成 （dark:bg-black のため） */
@custom-variant dark (&:where(.dark, .dark *));

/* https://tailwindcss.com/docs/theme#theme-variable-namespaces */
@theme {
    --color-iceberg-dark: #161821;
    --color-iceberg-light: #e8e9ec;
    --breakpoint-3xl: 1800px;
    --breakpoint-4xl: 2460px;
}

/* typographyプラグインのスタイルをリセット */
.prose {
    max-width: none;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
        color: inherit;
    }
}

/* 引き続きtailwind.conifg.tsを利用するための回避策はある */
/* @config '../../tailwind.config.ts'; */

移行できてよかったですね
おわり

Moyatto