如何在Next.js中配置Tailwind CSS-css教程-PHP中文网

tailwind 类不生效的头号原因是 tailwind.config.js 中 content 路径配置错误，导致扫描不到 classname 所在文件，工具类根本未生成；必须精确匹配实际路径、确保 @tailwind 指令完整且位于 globals.css 顶部、正确导入 globals.css、重启开发服务器，并移除冗余 postcss 配置。

如何在next.js中配置tailwind css

tailwind.config.js 里的 content 路径配错，是 Tailwind 类不生效的头号原因。只要路径没覆盖到你写 className 的文件，对应工具类根本不会生成——不是“没生效”，是压根不存在。

content 路径必须精确匹配实际文件位置

Next.js 构建时静态扫描 content 列出的所有文件，提取其中出现的 className 值，再生成 CSS。漏掉一个路径，就漏掉一批类。

用 App Router？确保包含 ./app/**/*.{js,ts,jsx,tsx,mdx} —— 注意是 ./app/，不是 ./src/app/（除非你真把 app 目录放在 src 下）
组件在 src/components？那就得加 ./src/components/**/*.{js,ts,jsx,tsx,mdx}，只写 ./components/** 会失效
混用 Pages Router 和 App Router？两个路径都得列全：./pages/**/*.{...} 和 ./app/**/*.{...}
用了 MDX？别忘了 .mdx 后缀，否则 className 在文档里不会被识别

@tailwind 指令必须出现在 globals.css 顶部且完整

app/globals.css 是 App Router 的唯一全局样式入口，它必须被 app/layout.tsx 显式导入，且顶部三行指令缺一不可：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

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

这三行不能被注释、不能换顺序、不能少任何一行——少 @tailwind utilities 就等于没工具类
自定义 CSS 规则（比如 body { ... }）必须写在这三行之后，否则会被 Tailwind 的 base 层重置覆盖
如果用了暗黑模式，darkMode: 'class' 必须写在 tailwind.config.js 的 theme 外层，不是加 class="dark" 到 HTML 上

postcss.config.js 或 postcss.config.mjs 是现代 Next.js 的干扰项

Next.js 13.4+ 内置 PostCSS 支持，不需要、也不该手动维护 PostCSS 配置文件。

运行 npx tailwindcss init -p 会生成 postcss.config.js，但对新版 Next.js 来说它是冗余甚至有害的——删掉它
只执行 npx tailwindcss init（不带 -p），它只生成 tailwind.config.js，安全可控
如果项目里已有 postcss.config.mjs 且内容非空，建议删掉；保留仅当你明确需要额外 PostCSS 插件（如 postcss-px-to-viewport）
依赖只需装 tailwindcss、postcss、autoprefixer 三个，且全部用 -D 安装