Next.js 15 RC + Tailwind CSS v4.0-alpha
takeharak
Rust 製 CSS ツール Lightning CSS を採用した Tailwind CSS v4.0-alpha と React 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 │
│ │
└──────────────────────────┘