Início / user-17911990

Amritanshu SINGH's questions

Martin Hope
Amritanshu SINGH
Asked: 2025-04-16 23:07:20 +0800 CST
  • 6

Estou configurando um novo projeto usando Next.js (v15.3.0 - Pages Router) e Tailwind CSS (v4.1.4) e encontrei um problema de compilação persistente em que as classes de utilitários do Tailwind não estão sendo reconhecidas.

O problema central:

O servidor de desenvolvimento Next.js ( next dev) falha ao compilar, gerando erros como:

Error: Cannot apply unknown utility class: bg-gray-50

Inicialmente, isso acontecia com as classes padrão do Tailwind ( bg-gray-50) usadas @applyno meu globals.css. Depois de testar configurações diferentes globals.css(como usar @import "tailwindcss/preflight"; @reference "tailwindcss/theme.css";), o erro passou para as cores do meu tema personalizado :

Error: Cannot apply unknown utility class: text-primary-600

Ao tentar usar a theme()função diretamente em @layer base, recebo:

Error: Could not resolve value for theme function: theme(colors.gray.50).

Basicamente, parece que o processo de construção do PostCSS/Tailwind não está reconhecendo ou aplicando nenhuma classe de utilitário do Tailwind corretamente dentro do pipeline de construção do CSS.

Versões relevantes:

  • Next.js: 15.3.0 (Usando o roteador de páginas)
  • Tailwind CSS: 4.1.4
  • @tailwindcss/postcss: 4.1.4
  • Node.js: v20.x

Arquivos de configuração:

tailwind.config.js(Tentativa simplificada):

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { // No 'extend'
    fontFamily: {
      sans: ['Inter', ...defaultTheme.fontFamily.sans],
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray, // Explicitly included
      red: colors.red,
      green: colors.green,
      primary: { // My custom color
        DEFAULT: '#2563EB',
        // ... other shades 50-950
        600: '#2563EB',
        700: '#1D4ED8',
      },
      secondary: { /* ... custom secondary color ... */ },
    },
     ringOffsetColor: {
        DEFAULT: '#ffffff',
     },
  },
  plugins: [],
};

postcss.config.js:

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {}, // Using the v4 specific plugin
    autoprefixer: {},
  },
};

src/styles/globals.css(Última tentativa):

/* src/styles/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@import "tailwindcss/preflight";
@tailwind theme;
@tailwind utilities;

@layer base {
    html {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-gray-50 text-gray-900 antialiased;
    }

    a {
        @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;
    }
}

Etapas de solução de problemas tentadas (sem sucesso):

  • Instalações limpas completas:.next , node_modulese , foram excluídos várias vezes package-lock.jsone executados novamente npm install.
  • Caminhos de configuração verificados:content caminhos verificados em tailwind.config.jse baseUrlem tsconfig.json.
  • Simplificado tailwind.config.js: Tentei remover theme.extende definir cores diretamente em theme.
  • Cores padrão explícitas: adicionadas explicitamente gray: colors.gray, red: colors.redetc. à configuração.
  • Diretivas diferentes globals.css:
    • Testei o padrão v3 @tailwind base; @tailwind components; @tailwind utilities;.
    • Testado @import "tailwindcss/preflight"; @reference "tailwindcss/theme.css"; @tailwind utilities;(isso corrigiu erros de classe padrão, mas não os personalizados ao usar @apply).
    • Testado @import "tailwindcss/preflight"; @tailwind theme; @tailwind utilities;(atual).
  • @applyvs. theme(): Tentei usar cada um desses métodos dentro @layer basede globals.css. @applyfalhou primeiro, depois theme()também.
  • postcss.config.jsVariações: Tentei usar tailwindcss: {}em vez de @tailwindcss/postcss: {}.

Apesar dessas etapas, a compilação falha consistentemente, incapaz de reconhecer ou processar classes de utilitários do Tailwind referenciadas em CSS (especialmente em globals.css). Classes de utilitários padrão usadas diretamente em elementos JSX (por exemplo, <div className="p-4 bg-primary-500">) também falham em aplicar estilos corretamente porque o CSS subjacente não é gerado corretamente.

Alguém já encontrou problemas semelhantes com esta pilha específica (Next.js 15 / Tailwind 4 / Pages Router)? O que pode estar causando essa falha fundamental no processamento do Tailwind na compilação do Next.js? Alguma sutileza de configuração que eu possa estar ignorando?

Agradecemos antecipadamente por qualquer informação!

css