在 nextjs 项目中添加 tailwindcss4

使用命令，但未试用过

npx @tailwindcss/upgrade

利用 npx 创建项目

npx create-next-app@latest --use-yarn

添加依赖，tailwindcss/postcss

yarn add --dev tailwindcss @tailwindcss/postcss postcss

配置文件内容

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

文件内容 ./src/app/globals.css

@import "tailwindcss";
@config "./tailwind.config.js";

配置文件 + 插件

import jswPresets from '@jswork/presets-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [jswPresets()],
  theme: {
    extend: {}
  },
  plugins: []
};

hello tailwind

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