1. 安装 Tailwind CSS 及其相关依赖

在项目根目录下运行以下命令来安装 Tailwind CSS、postcss 和 autoprefixer：

npm install tailwindcss postcss autoprefixer

2. 初始化 Tailwind CSS 配置文件

使用以下命令生成 tailwind.config.js 和 postcss.config.js 文件：

npx tailwindcss init -p

• -p 选项会自动生成 postcss.config.js 文件。

4. 配置 tailwind.config.js

打开生成的 tailwind.config.js，配置内容如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './modules/**/*.{js,ts,jsx,tsx}',
    './common/**/*.{js,ts,jsx,tsx}', // Next.js 13 App Directory
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• content 数组确保 Tailwind CSS 能够扫描 pages、components 文件夹中的所有文件来移除未使用的样式。

5. 创建全局样式文件

在 styles 目录中创建一个 globals.css 文件，并添加 Tailwind 的基础指令：

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

6. 引入 globals.css 文件

import '../styles/globals.css'; 
function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } 
export default MyApp;