Next.js 15集成next-intl后Tailwind CSS样式不生效问题

为实现多语言支持，我基于next-intl调整了Next.js项目的文件结构，具体如下：

app/
  favicon.ico
  globals.css
  [locale]/
    layout.tsx
    page.tsx       
    (root)/
      services/
        page.tsx
      gallery/
        page.tsx
      reviews/
        page.tsx

我在[locale]/layout.tsx中通过import "../globals.css"导入全局样式文件，但Tailwind样式完全没有应用到任何页面，不过next-intl的多语言功能正常。我是Next.js新手，当前使用tailwindcss@4.1.11。

以下是我的配置文件内容：

postcss.config.js #

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {}
  }
}

tailwind.config.ts #

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
        './pages/**/*.{js,ts,jsx,tsx}',
        './public/**/*.{html,js}'],
    theme: {
        extend: {
            fontFamily: {
                kollektiv: ['Kollektif', 'sans-serif'],
            },
            animation: {
                'border-pulse-red': 'borderPulseRed 1.5s infinite',
            },
            keyframes: {
                borderPulseRed: {
                    '0%, 100%': { borderColor: '#fee2e2' },
                    '50%': { borderColor: '#ef4444' },
                },
            },
        },
    },
    plugins: [],
};

globals.css #

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

@layer utilities {
  .dark {
    @apply dark:bg-background dark:text-foreground;
  }

  .dark * {
    @apply dark:border-border dark:outline-ring/50;
  }

  .navbar_ul {
    @apply flex items-center gap-6 ml-6 text-lg font-semibold text-gray-700 transition-all duration-500;
  }

  .footer_section {
    @apply flex items-center justify-around gap-4 px-2 py-4 bg-[#1E1E1E];
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .link-hover-effect {
    color: #d1d5db; /* Tailwind's text-gray-300 */
    transition-property: color, transform, text-decoration;
    transition-duration: 300ms;
  }

  .link-hover-effect:hover {
    color: #fff; /* Tailwind's text-white */
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: scale(1.05);
  }


  .nav-underline {
    @apply relative cursor-pointer;
  }

  .nav-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #0d9488, #2563eb); /* teal-600 to blue-600 */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .nav-underline:hover::after {
    transform: scaleX(1);
  }


  .navbar_ul > li {
    @apply relative cursor-pointer;
  }

  .navbar_ul > li::after {
    content: '';
    display: block;
    height: 2px;
    background-color: #60a5fa;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
  }

  .navbar_ul > li:hover::after {
    transform: scaleX(1);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

解决方案 #

1. 修正tailwind.config.ts的导出方式
   由于是TypeScript文件，需使用ES模块导出语法，将module.exports替换为export default：

   /** @type {import('tailwindcss').Config} */
   export default {
       content: ['./app/**/*.{js,ts,jsx,tsx}',
       './components/**/*.{js,ts,jsx,tsx}',
           './pages/**/*.{js,ts,jsx,tsx}',
           './public/**/*.{html,js}'],
       theme: {
           extend: {
               fontFamily: {
                   kollektiv: ['Kollektif', 'sans-serif'],
               },
               animation: {
                   'border-pulse-red': 'borderPulseRed 1.5s infinite',
               },
               keyframes: {
                   borderPulseRed: {
                       '0%, 100%': { borderColor: '#fee2e2' },
                       '50%': { borderColor: '#ef4444' },
                   },
               },
           },
       },
       plugins: [],
   };
   

2. 清理缓存并重启开发服务器
   文件结构调整后可能存在缓存问题，执行以下命令清理缓存后重启服务：

   rm -rf .next/ && rm -rf node_modules/.cache/
   npm run dev
   

3. 验证全局样式导入路径
   当前../globals.css路径是正确的，若仍有问题，可尝试配置绝对导入：
   先在tsconfig.json中添加路径别名：

   {
     "compilerOptions": {
       "paths": {
         "@/*": ["./*"]
       }
     }
   }
   

   然后在[locale]/layout.tsx中修改导入语句：

   import '@/app/globals.css';
   

4. 检查Tailwind v4依赖完整性
   确保所有必要依赖已正确安装：

   npm install tailwindcss@4.1.11 @tailwindcss/postcss autoprefixer postcss
   

内容的提问来源于stack exchange，提问作者Gritcu Bogdan