在 nextjs 中安装taillwindcss

初始化 nextjs

npx create-next-app devcto
cd devcto

在 nextjs 项目中

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

在项目根目录中添加 tailwind.config.js 把下面内容copy进去

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在./styles/globals.css 文件中添加以下内容

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

启动项目

npm run dev

在项目中增加 nextjs 组件样式

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}