next 中配置 tailwindcss

48 阅读1分钟

1、pnpm 安装

"@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",

2、创建 postcss.config.mjs

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

3、创建tailwind.config.ts

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

4、引入全局 globals.css

@import 'tailwindcss';