文章目录
前言
Next.js中使用tailwind css
demo：tailwindcss-demo代码仓库
一、初始化Next.js项目
参考：Next.js官方文档
# 创建支持typescript的Next.js项目
yarn create next-app --typescript
二、添加tailwind css配置
1.安装Tailwind以及其他依赖
# Next.js版本大于10，或更新
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# Next.js版本小于9，或更旧
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
2.创建Tailwind配置文件
生成 tailwind.config.js 和 postcss.config.js 文件
npx tailwindcss init -p
3.引入Tailwind CSS
/* demo/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
4.使用Tailwind CSS
demo：tailwindcss-demo代码仓库
总结
Next.js中使用tailwind css