Tailwind CSS 4.0无tailwind.config.ts，Next.js适配Aceternity UI配置方案

Tailwind CSS 4.0确实调整了配置文件的语法（默认使用ESM），但依然支持tailwind.config.ts/tailwind.config.js文件，只需将原配置转换成适配4.0的写法即可，具体步骤如下：

1. 安装依赖 #

确保安装Aceternity UI所需的额外依赖：

npm install mini-svg-data-uri

2. 创建/修改Tailwind配置文件 #

在项目根目录创建或替换tailwind.config.ts，内容如下（适配Tailwind 4.0的ESM语法）：

import svgToDataUri from 'mini-svg-data-uri';
import colors from 'tailwindcss/colors';
import { flattenColorPalette } from 'tailwindcss/utils';
import type { Config } from 'tailwindcss';

// 生成CSS变量的辅助函数
function addVariablesForColors({ addBase, theme }: { addBase: any; theme: any }) {
  const allColors = flattenColorPalette(theme('colors'));
  const newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );

  addBase({
    ':root': newVars,
  });
}

export default {
  // 根据你的Next.js项目结构调整路径，比如app目录或src目录
  content: ['./src/**/*.{ts,tsx}', './app/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    // 保留你原有的theme配置内容
  },
  plugins: [
    addVariablesForColors,
    // 自定义背景图案工具类
    ({ matchUtilities, theme }: { matchUtilities: any; theme: any }) => {
      matchUtilities(
        {
          'bg-grid': (value: string) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
            )}")`,
          }),
          'bg-grid-small': (value: string) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
            )}")`,
          }),
          'bg-dot': (value: string) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
            )}")`,
          }),
        },
        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
      );
    },
  ],
} satisfies Config;

3. 确认PostCSS配置 #

确保项目根目录的postcss.config.js配置正确（Tailwind 4.0需要该文件）：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

关键调整说明 #

• 语法转换：将原CommonJS的require改为ESM的import，module.exports改为export default
• 工具函数导入：flattenColorPalette从tailwindcss/utils导入（Tailwind 4.0调整了路径）
• 类型适配：使用satisfies Config确保配置符合Tailwind类型规范
• 路径适配：根据你的Next.js项目结构（src或app目录）调整content字段的扫描路径

内容的提问来源于stack exchange，提问作者Samiul Islam