Сбой утилит Tailwind 4 («Невозможно применить неизвестный класс утилиты») в сборке Next.js 15 (маршрутизатор страниц) ⇐ CSS

[Anonymous]

Я настраиваю новый проект, используя Next.js (v15.3.0 – Pages Router) и Tailwind CSS (v4.1.4), и столкнулся с постоянной проблемой сборки, из-за которой служебные классы Tailwind не распознаются.
Основная проблема:
Сервер разработки Next.js (

Код: Выделить всё

next dev

) не компилируется, выдает такие ошибки, как:

Код: Выделить всё

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

Изначально это происходило для классов Tailwind по умолчанию (

Код: Выделить всё

bg-gray-50

), используемый с @apply в моем globals.css. После того, как я попробовал различные конфигурации в globals.css (например, использование @import "tailwindcss/preflight"; @reference "tailwindcss/theme.css";), ошибка перешла на мои пользовательские цвета темы:

Код: Выделить всё

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

При попытке использовать функцию theme() непосредственно в базе @layer я получаю:

Код: Выделить всё

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

По сути, похоже, что процесс сборки PostCSS/Tailwind неправильно распознает или применяет любые служебные классы Tailwind в конвейере сборки CSS.
Соответствующие версии:

• Next.js: 15.3.0 (с использованием Pages Router)
• CSS попутного ветра: 4.1.4

• Код: Выделить всё

  @tailwindcss/postcss

  :[/b] 4.1.4
• Node.js: v20.x

Файлы конфигурации:

Код: Выделить всё

tailwind.config.js

(упрощенная попытка):[/b]

Код: Выделить всё

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

:[/b]

Код: Выделить всё

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

Код: Выделить всё

src/styles/globals.css

(Последняя попытка):[/b]

Код: Выделить всё

/* 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;
}
}

Попытки устранения неполадок (без успеха):

• Полная чистая установка: Несколько раз удалялись .next, node_modules, package-lock.json и повторно запускался npm install.
• Проверенные пути конфигурации: Проверено пути содержимого в Tailwind.config.js и baseUrl в tsconfig.json.
• Упрощенный Tailwind.config.js: Пробовал удалить theme.extend, определяя цвета непосредственно под темой.
• Явные цвета по умолчанию: Явно добавлен серый: Colors.gray, красный: Colors.red и т. д. в конфигурацию.
• Различные директивы globals.css:
  
  Попробовал стандартную базу v3 @tailwind; компоненты @tailwind; Утилиты @tailwind;.
• Пробовал @import "tailwindcss/preflight"; @reference "tailwindcss/theme.css"; Утилиты @tailwind; (это исправление ошибок класса по умолчанию, но не пользовательских ошибок при использовании @apply).
• Пробовал @import "tailwindcss/preflight"; тема @tailwind; Утилиты @tailwind; (текущий).

[*]

Код: Выделить всё

@apply

против theme():[/b] Пробовал использовать каждый из этих методов в базе @layer в globals.css. Сначала произошел сбой @apply, затем и theme().
[*]

Код: Выделить всё

postcss.config.js

Варианты:[/b] Пробовал использовать Tailwindcss: {} вместо @tailwindcss/postcss: {}.

Несмотря на эти шаги, сборка постоянно завершается сбоем, поскольку невозможно распознать или обработать служебные классы Tailwind, на которые есть ссылки в CSS (особенно в globals.css). Стандартные служебные классы, используемые непосредственно в элементах JSX (например, ), также не могут правильно применять стили, поскольку базовый CSS не генерируется должным образом.
Кто-нибудь сталкивался с подобными проблемами с этим конкретным стеком (Next.js 15 / Tailwind 4 / Pages Router)? Что может быть причиной такого фундаментального сбоя в обработке Tailwind в сборке Next.js? Какие-нибудь нюансы конфигурации, которые я мог упустить?
Заранее благодарим за любую информацию!

Подробнее здесь: https://stackoverflow.com/questions/795 ... -next-js-1