Tailwind CSS v4.0をNext.jsで試してみる

2025/03/30

2025/04/01

# Next.js

# Tailwind CSS

プロジェクト作成

Next.jsのプロジェクトを作成します。

$ npx create-next-app@latest

Tailwind CSSの使用についてはYesを選択し、その他は任意の設定で作成します。

package.jsonを確認するとtailwindcssのv4が追加されています。

{
  "name": "tailwind-v4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.2.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
    "@eslint/eslintrc": "^3"
  }
}

CSSファースト設計

v3の時はtailwind.config.tsファイルが作成され、テーマの定義などを行っていましたが、v4では作成されなくなっています。

v3の時のtailwind.config.tsファイル例

import type { Config } from "tailwindcss"

export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#DB7D3D",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
} satisfies Config

app/global.cssではv3の時はTailwind CSSの読み込みの記述が3行ありましたが、v4では1行のみになっています。

v3の場合

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 省略 */

v4の場合

@import "tailwindcss";

tailwind.config.tsで行っていたテーマなどの設定はcssファイル内で行うようになったようです。

@import 'tailwindcss';

@theme {
  --color-orange: #DB7D3D;
}

任意のユーティリティ値

v3ではgrid-cols-15のような指定はできませんでしたが、v4からは任意のサイズのgridの使用が可能になっています。

v3の場合

v4の場合

export default function Home() {
  return (
    <div className="grid grid-cols-15 p-4">
      <div className="border">1</div>
      <div className="border">2</div>
      <div className="border">3</div>
      <div className="border">4</div>
      <div className="border">5</div>
      <div className="border">6</div>
      <div className="border">7</div>
      <div className="border">8</div>
      <div className="border">9</div>
      <div className="border">10</div>
      <div className="border">11</div>
      <div className="border">12</div>
      <div className="border">13</div>
      <div className="border">14</div>
      <div className="border">15</div>
    </div>
  );
}

3D変換ユーティリティ

v4からスタイルを3Dに変換できるクラスが追加されています。

export default function Home() {
  return (
    <div className="perspective-distant m-32">
      <article className="rotate-x-51 rotate-z-43 transform-3d">
        <h2 className="font-bold">タイトルです</h2>
        <p>テキストですテキストですテキストですテキストですテキストですテキストですテキストですテキストです</p>
      </article>
    </div>
  );
}

その他v4からでの変更点は以下の公式ブログから確認できます。
https://tailwindcss.com/blog/tailwindcss-v4

Lint設定について

代表的なTailwind CSS用静的解析のパッケージとしてクラスの並び順を自動で修正してくれたり、存在しないクラスに対して警告を出すeslint-plugin-tailwindcssがありますが、2025/3/30現在v4には対応していないようです。

v4サポートのためのプルリクエストも作成されているようなのでいずれ対応しそうです。

その他にもeslint-plugin-readable-tailwindというパッケージもありこちらはv4でも使えることが確認できました。

v3からの移行

公式がアップグレードガイドを公開しています。
https://tailwindcss.com/docs/upgrade-guide

v3を使用しているNext.jsのプロジェクトで試してみます。

移行コマンドを実行を実行します。

$ npx @tailwindcss/upgrade

tailwind.config.tsからcssファイルへの移行、関連パッケージの追加、アップデートなどが自動で開始されます。

@tailwindcss/upgrade@4.0.17
Ok to proceed? (y) y
≈ tailwindcss v4.0.17

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./tailwind.config.ts` to `./styles/globals.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Migrated configuration file: `./tailwind.config.ts` 

│ Migrating templates… 

│ ↳ Migrated templates for configuration file: `./tailwind.config.ts` 

│ Migrating stylesheets… 

│ ↳ Migrated stylesheet: `./styles/globals.css` 

│ Migrating PostCSS configuration… 

│ ↳ Installed package: `@tailwindcss/postcss` 

│ ↳ Migrated PostCSS configuration: `./postcss.config.mjs` 

│ Updating dependencies… 

│ ↳ Updated package: `prettier-plugin-tailwindcss` 

│ ↳ Updated package: `tailwindcss` 

│ Verify the changes and commit them to your repository.

実行が完了すると公式のUpgrading manuallyの手順は全て自動で行われているようです。

global.css