Tailwindcss v4 не выбирает занятия ⇐ Javascript

[Anonymous]

Я делаю работу в монорепо, где у меня есть 2 приложения. Первый - следующее JS, а второй - React JS. Недавно я обновил версию CSS Tailwind до последней. Но проблема в том, что мой ниже CSS не применяется после обновления. Я следил за несколькими документами и сделал некоторую настройку, но не добился успеха. Не могли бы вы взглянуть и направить меня. Спасибо < /p>
/*
@tailwind base;
@tailwind components;
@tailwind utilities; */

@import 'tailwindcss';

@theme {
/* Typography */
--h1: 'text-gray-900';
--h2: 'text-3xl md:text-4xl font-bold text-gray-900';
--h3: 'text-2xl md:text-3xl font-bold text-gray-900';
--h4: 'text-xl md:text-2xl font-semibold text-gray-900';
--h5: 'text-lg md:text-xl font-semibold text-gray-900';
--h6: 'text-base md:text-lg font-semibold text-gray-900';
--subtitle: 'text-xl text-gray-600';
--body: 'text-base text-gray-700';
--body-sm: 'text-sm text-gray-700';
--caption: 'text-sm text-gray-500';
--color-mint-500: oklch(0.72 0.11 178);

/* Links */
--link: 'text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200';
--link-muted: 'text-gray-500 hover:text-gray-700 transition-colors duration-200';
--link-primary: 'text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200';
--link-underline: 'text-gray-600 hover:text-primary-500 underline transition-colors duration-200';

/* Spacing */
--section: 'py-20';
--container-padded: 'container mx-auto px-4';

/* Buttons */
--btn: 'px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block';
--btn-sm: 'px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm';
--btn-lg: 'px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg';
--btn-primary: 'bg-primary-500 text-white hover:bg-primary-600';
--btn-secondary: 'bg-white text-primary-500 border border-primary-500 hover:bg-gray-50';
--btn-white: 'bg-white text-primary-500 hover:bg-gray-100';
--btn-outline: 'bg-transparent text-white border border-white hover:bg-primary-600'; /* Cards */
--card: 'bg-white rounded-lg shadow-sm overflow-hidden';
--card-hover: 'transition-all duration-300 hover:shadow-md';

/* Features */
--feature-card: 'bg-gray-50 p-8 rounded-lg';
--feature-icon: 'text-primary-500 mb-4 h-12 w-12';

/* Sections */
--hero-section: 'bg-gradient-to-b from-white to-gray-50';
--section-title-container: 'text-center mb-16';
--cta-section: 'bg-primary-500 text-white';
}

@layer components {
/* Typography */
.h1 {
@reference text-4xl md:text-5xl font-bold text-gray-900;
}

.h2 {
@reference text-3xl md:text-4xl font-bold text-gray-900;
}

.h3 {
@reference text-2xl md:text-3xl font-bold text-gray-900;
}

.h4 {
@reference text-xl md:text-2xl font-semibold text-gray-900;
}

.h5 {
@reference text-lg md:text-xl font-semibold text-gray-900;
}

.h6 {
@reference text-base md:text-lg font-semibold text-gray-900;
}

.subtitle {
@reference text-xl text-gray-600;
}

.body {
@reference text-base text-gray-700;
}

.body-sm {
@reference text-sm text-gray-700;
}

.caption {
@reference text-sm text-gray-500;
}

/* Links */
.link {
@reference text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200;
}

.link-muted {
@reference text-gray-500 hover:text-gray-700 transition-colors duration-200;
}

.link-primary {
@reference text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200;
}

.link-underline {
@reference text-gray-600 hover:text-primary-500 underline transition-colors duration-200;
}

/* Spacing */
.section {
@reference py-20;
}

.container-padded {
@reference container mx-auto px-4;
}

/* Buttons */
.btn {
@reference px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block;
}

.btn-sm {
@reference px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm;
}

.btn-lg {
@reference px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg;
}

.btn-primary {
@reference bg-primary-500 text-white hover:bg-primary-600;
}

.btn-secondary {
@reference bg-white text-primary-500 border border-primary-500 hover:bg-gray-50;
}

.btn-white {
@reference bg-white text-primary-500 hover:bg-gray-100;
}

.btn-outline {
@reference bg-transparent text-white border border-white hover:bg-primary-600;
}

/* Cards */
.card {
@reference bg-white rounded-lg shadow-sm overflow-hidden;
}

.card-hover {
@reference transition-all duration-300 hover:shadow-md;
}

/* Features */
.feature-card {
@reference bg-gray-50 p-8 rounded-lg;
}

.feature-icon {
@reference text-primary-500 mb-4 h-12 w-12;
}

/* Sections */
.hero-section {
@reference bg-gradient-to-b from-white to-gray-50;
}

.section-title-container {
@reference text-center mb-16;
}

.cta-section {
@reference bg-primary-500 text-white;
}
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... ng-classes