Tailwind CSS

Tailwind CSS 是一个 CSS 框架，它提供了一组预定义的 CSS 类，用于快速样式化元素。

遵循官方指南

遵循官方 Tailwind CSS for Next.js 指南为您的项目设置 Tailwind CSS。

创建 `globals.css` 文件

将 Tailwind CSS 导入到 globals.css：

globals.css


@import 'tailwindcss';
 
/* 可选：导入 Nextra 主题样式 */
@import 'nextra-theme-docs/style.css'; /* 或 nextra-theme-blog/style.css */
 
@variant dark (&:where(.dark *));

在根布局中导入样式

要全局应用样式，请在您的根布局文件中导入 globals.css 文件：

app/layout.jsx


import '../path/to/your/globals.css'
 
export default async function RootLayout({ children }) {
  // ... 您的布局逻辑在这里
}

Tailwind CSS

遵循官方指南

创建 globals.css 文件

在根布局中导入样式

创建 `globals.css` 文件