next增加tailwindcss（v3版本）

初始信息

1. next版本：13.5.3
2. tailwindcss：^3.4.18
3. autoprefixer：^10.4.22
4. postcss：^8.5.6

开始

1. 第一步初始化自己的next项目，这个不做介绍了，依据自己项目来
2. 安装tailwindcss v3 版本及其对等依赖，然后运行init命令生成tailwind .config.js和postcss.config.js文件：

   	pnpm add -D tailwindcss@^3 postcss autoprefixernpx tailwindcss init -p
   

3. 如果npx tailwindcss init -p走不通，直接复制下面配置文件即可（该命令主要是拉取配置文件：tailwind.config.js和postcss.config.js）
4. tailwind.config.js文件内容

   /** @type {import('tailwindcss').Config} */module.exports = {content: ['./src/pages/**/*.tsx','./src/components/**/*.tsx','./src/layouts/**/*.tsx',],theme: {extend: {},},plugins: [],
   };

5. 增加tailwindcss.css文件(我一般丢这里面：src/assets/tailwindcss/index.css)

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

6. 增加postcss.config.js

   module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
   };
   

7. 然后在入口文件_app.tsx (src/pages/_app.tsx)引入tailwind.css

   import  '@/src/assets/tailwindcss/index.css';
   

8. 此时此刻你配置完毕后如果发现没生效那么继续往下走:
9. 打开项目next.config.js配置文件（next项目的配置文件入口）

   module.exports = {// ...其他配置项postcss: {plugins: [require('tailwindcss'), require('autoprefixer')],},
   }
   

10. 再然后打开首页做测试就行了

    export default function Index() {return <div className="text-[#f60] bg-[red]">123</div>;
    }