Next.js中使用Tailwind CSS

---

前言

Next.js中使用tailwind css
demo：tailwindcss-demo代码仓库

---

一、初始化Next.js项目

参考：Next.js官方文档

# 创建支持typescript的Next.js项目
yarn create next-app --typescript

二、添加tailwind css配置

参考：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

• 修改postcss.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']
}

3.引入Tailwind CSS

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4.使用Tailwind CSS

demo：tailwindcss-demo2代码仓库

---

总结

Next.js中使用tailwind css