Nextjs Tailwind CSS 下载和配置
1. 安装 Tailwind CSS 及其相关依赖
在项目根目录下运行以下命令来安装 Tailwind CSS、postcss 和 autoprefixer：
npm install tailwindcss postcss autoprefixer2. 初始化 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;