Tech Blog

Next.js 15 RC + Tailwind CSS v4.0-alpha

Rust 製 CSS ツール Lightning CSS を採用した Tailwind CSS v4.0-alphaReact Compiler, React 19 等、久々に大型アップデートが来てる Next.js 15 RC を試してみる

今回の環境

TL;DR

create-next-app
npx create-next-app@rc --turbo
Need to install the following packages:
create-next-app@15.0.0-rc.0
Ok to proceed? (y)

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in ./my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested (out)way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 368 packages, and audited 369 packages in 21s

140 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app at ./my-app
React Compiler (Experimental)
npm install babel-plugin-react-compiler

added 27 packages, and audited 396 packages in 7s

143 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
  // next.config.mjs
  /** @type {import('next').NextConfig} */
- const nextConfig = {}
+ const nextConfig = {
+   experimental: {
+     reactCompiler: true,
+   },
+   output: 'export',
+ };

  export default nextConfig;

run dev
npm run dev

> my-app@0.1.0 dev
> next dev --turbo

  ▲ Next.js 15.0.0-rc.0 (turbo)
  - Local:        http://localhost:3000
  - Experiments (use with caution):
    · reactCompiler

 ✓ Starting...
 ✓ Ready in 1131ms
Tailwind CSS v4 alpha
npm install tailwindcss@next @tailwindcss/postcss@next

added 6 packages, removed 37 packages, changed 2 packages, and audited 365 packages in 9s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
  // postcss.config.mjs
  /** @type {import('postcss-load-config').Config} */
  const config = {
    plugins: {
-     tailwindcss: {},
+     '@tailwindcss/postcss': {},
    },
  };

  export default config;

Zero-configuration content detection
  // tailwind.config.ts
  import type { Config } from "tailwindcss";

  const config: Config = {
-   content: [
-     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-   ],
    theme: {
      extend: {
        colors: {
  ...
CSS-first configuration
  // src/app/globals.css
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

  :root {
    --background: #ffffff;
  ...
  // tailwind.config.ts
  import type { Config } from "tailwindcss";

  const config: Config = {
-   theme: {
-     extend: {
-       colors: {
-         background: "var(--background)",
-         foreground: "var(--foreground)",
-       },
-       fontFamily: {
-         sans: ["var(--font-geist-sans)"],
-         mono: ["var(--font-geist-mono)"],
-       },
-     },
-   },
    plugins: [],
  };
  export default config;

  // src/app/globals.css
  @import "tailwindcss";

+ @theme {
+   --color-background: var(--background);
+   --color-foreground: var(--foreground);
+   --font-family-sans: var(--font-geist-sans);
+   --font-family-mono: var(--font-geist-mono);
+ }

:root {
  --background: #ffffff;
...
Delete unnecessary file
  // tailwind.config.ts
- import type { Config } from "tailwindcss";
-
- const config: Config = {
-   plugins: [],
- };
- export default config;
-
build and serve
npm run build

> my-app@0.1.0 build
> next build

  ▲ Next.js 15.0.0-rc.0
  - Experiments (use with caution):
    · reactCompiler

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.25 kB        94.2 kB
└ ○ /_not-found                          897 B          89.8 kB
+ First Load JS shared by all            88.9 kB
  ├ chunks/180-bf0110f869e21e22.js       35.6 kB
  ├ chunks/4bd1b696-443901ba1e0805a1.js  51.5 kB
  └ other shared chunks (total)          1.87 kB


○  (Static)  prerendered as static content

npx serve@latest out

   ┌──────────────────────────┐
   │                                          │
   │   Serving!                               │
   │                                          │
   │   - Local:    http://localhost:3000      │
   │   - Network:  http://172.17.0.3:3000     │
   │                                          │
   └──────────────────────────┘

Create Next App

参考にしたページ