菜单
Set up Tailwind CSS v4.3 in a Next.js 16 project (App Router) — PostCSS plugin, CSS-first @theme tokens, dark mode, plus the v4.2 webpack plugin path for non-Vite/Turbopack stacks and v4.3 utilities (scrollbars, @container-size, new palettes).
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Leo-Atienza/atlas-claude --skill tailwind-setup命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | tailwind-setup |
| description | Set up Tailwind CSS v4.3 in a Next.js 16 project (App Router) — PostCSS plugin, CSS-first @theme tokens, dark mode, plus the v4.2 webpack plugin path for non-Vite/Turbopack stacks and v4.3 utilities (scrollbars, @container-size, new palettes). |
| version | 2.0.0 |
| license | MIT |
The default and recommended setup for the user's primary stack: Next.js 16 App Router + Tailwind CSS v4.3. For React Native / Expo, use the expo-tailwind-setup skill instead.
create-next-app already wires Tailwind v4 with the --tailwind flag — accept the defaults:
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
That gives you @tailwindcss/postcss, a working app/globals.css, and a postcss.config.mjs. Skip to "Add design tokens" below.
Use this when adding Tailwind v4 to an existing Next.js 16 codebase or migrating from v3.
npm install tailwindcss@^4.3 @tailwindcss/postcss@^4.3
# optional companions
npm install tailwind-merge clsx
postcss.config.mjsexport default {
plugins: {
"@tailwindcss/postcss": {},
},
};
No autoprefixer line — @tailwindcss/postcss handles vendor prefixing internally via Lightning CSS.
app/globals.css@import "tailwindcss";
@theme {
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
/* Brand tokens — register custom utilities like text-brand, bg-brand */
--color-brand: oklch(0.65 0.2 250);
--color-brand-foreground: oklch(0.98 0 0);
/* Custom radius scale */
--radius-pill: 9999px;
}
app/layout.tsximport "./globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
That's it — no tailwind.config.js, no @tailwind directives. Tailwind v4 reads tokens from CSS via @theme and discovers utilities via the @import "tailwindcss" line.
Token-hierarchy architecture (brand → semantic → component tiers): see skills/impeccable/reference/color-and-contrast.md § @theme token hierarchy.
Two patterns. Pick one — don't mix.
prefers-color-scheme (zero JS)@import "tailwindcss";
@theme {
--color-bg: light-dark(white, oklch(0.18 0 0));
--color-fg: light-dark(oklch(0.18 0 0), white);
}
html { color-scheme: light dark; }
Use bg-bg text-fg and the system handles the toggle. No dark: variants needed.
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-bg: white;
--color-fg: oklch(0.18 0 0);
}
Then write bg-bg dark:bg-zinc-950 text-fg dark:text-zinc-100. Pair with next-themes to drive the .dark class on <html>.
<div class="overflow-y-auto scrollbar-thin scrollbar-thumb-zinc-400 scrollbar-track-zinc-100 dark:scrollbar-thumb-zinc-700 dark:scrollbar-track-zinc-900">
Variants: scrollbar-thin, scrollbar-none, scrollbar-thumb-*, scrollbar-track-*. Replaces the tailwind-scrollbar plugin for most use cases.
@container-size (v4.3)Container queries that reference the container's own size as a token:
<article class="@container">
<div class="@container-size:h-40 @container-size:flex"> … </div>
</article>
Use this when a component should adapt to its parent's measured size, not the viewport.
mauve, olive, mist, taupe — slightly warmer / cooler than zinc/gray/slate/neutral/stone. Available as bg-mauve-50 … bg-mauve-950, etc. Useful when the existing five neutrals all look wrong against your brand color.
v4.2 ships ~3.8× faster incremental recompilation in Next.js dev. No code change required — just run npm install tailwindcss@^4.3 to pick up the perf delta.
Skip this section if you're on Turbopack (default in create-next-app@latest) — PostCSS works.
For a custom Next.js setup that uses webpack and bypasses PostCSS:
npm install @tailwindcss/webpack@^4.3
// next.config.js — only if you have a custom webpack(config) function and need direct integration
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /\.css$/,
use: ["@tailwindcss/webpack"],
});
return config;
},
};
This is rare in Next.js (PostCSS path covers ~99% of projects). Real use case: monorepos where one app has webpack-only constraints and you can't stand up PostCSS.
| v3 | v4 |
|---|---|
tailwind.config.js (theme.extend.colors etc.) | @theme { --color-*: ... } in CSS |
@tailwind base; @tailwind components; @tailwind utilities; | @import "tailwindcss"; |
darkMode: 'class' config | @custom-variant dark (&:where(.dark, .dark *)); |
content: [...] glob config | Auto-detected from file imports — usually delete |
plugins: [require('@tailwindcss/forms')] | @plugin "@tailwindcss/forms"; in CSS |
PostCSS tailwindcss plugin | PostCSS @tailwindcss/postcss plugin |
autoprefixer plugin | Built into Lightning CSS — remove |
Migration codemod:
npx @tailwindcss/upgrade@latest
Run on a clean git tree, review the diff. The codemod handles ~90% of the transform; manual fixes usually involve custom plugins or @apply chains in component CSS.
@import "tailwindcss"; or the wrong PostCSS plugin name (tailwindcss instead of @tailwindcss/postcss).@theme tokens not generating utilities: tokens must be inside the @theme block at the top level — not nested inside @layer.dark: variant: use light-dark() in the @theme value, or define separate --color-foo and --color-foo-dark and switch with @custom-variant.@apply in CSS Modules fails: v4 dropped support inside scoped modules; either move utilities to global CSS or use the tw className directly.next dev, mv .next /c/tmp/trash/.next-$(date +%s), restart. Cache between v3 and v4 is incompatible.