Ошибка ветра не может применить неизвестный класс утилиты `...` ⇐ CSS

[Anonymous]

Я кодирую проект Next.js и использую Tailwind для настройки всех стилей.
Проблема заключается в том, что я использую последнюю версию Tailwind (V4), и произошли некоторые изменения, что приводит к тому, что я пытаюсь показать следующее время сообщения:
не может применить уроки неизвестного утилита. Даже он не составляет стиль, к коду не применяется.
Вот tailwind.config.ts < /code> код: < /p>
import type {Config} from "tailwindcss";

const config: Config = {
darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./sanity/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
screens: {
xs: "475px",
},
colors: {
primary: {
"100": "rgb(255 232 240)",
DEFAULT: "#EE2B69",
},
secondary: "#FBE843",
white: {
"100": "rgb(247 247 247)", // enables /80
DEFAULT: "#FFFFFF",
},
black: {
"100": "rgb(51 51 51)", // #333333
"200": "rgb(20 20 19)", // #141413
"300": "rgb(125 128 135)", // #7D8087
DEFAULT: "#000000",
},
fontFamily: {
"work-sans": ["var(--font-work-sans)"],
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
boxShadow: {
100: "2px 2px 0px 0px rgb(0, 0, 0)",
200: "2px 2px 0px 2px rgb(0, 0, 0)",
300: "2px 2px 0px 2px rgb(238, 43, 105)",
},
},
},
},
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
};

export default config;

Вот globals.css code:
@import url("https://fonts.googleapis.com/css2?famil ... splay=swap");
@import "tailwindcss";
@import "tailwindcss/preflight";

@tailwind utilities;

@layer base {
:root {
--radius: 0 . 5 r e m ; < b r / > } < b r / > } < b r / > < b r / > @ l a y e r u t i l i t i e s { < b r / > . f l e x - b e t w e e n { < b r / > @ a p p l y f l e x j u s t i f y - b e t w e e n i t e m s - c e n t e r ; < b r / > } < b r / > < b r / > . t e x t - 3 0 - e x t r a b o l d { < b r / > @ a p p l y t e x t - [ 3 0 p x ] f o n t - e x t r a b o l d t e x t - w h i t e ; < b r / > } < b r / > < b r / > . t e x t - 3 0 - b o l d { < b r / > @ a p p l y t e x t - [ 3 0 p x ] f o n t - b o l d t e x t - b l a c k ; < b r / > } < b r / > < b r / > . t e x t - 3 0 - s e m i b o l d { < b r / > @ a p p l y f o n t - s e m i b o l d t e x t - [ 3 0 p x ] t e x t - b l a c k ; < b r / > } < b r / > < b r / > . t e x t - 2 6 - s e m i b o l d { < b r / > @ a p p l y f o n t - s e m i b o l d t e x t - [ 2 6 p x ] t e x t - b l a c k ; < b r / > } < b r / > < b r / > . t e x t - 2 4 - b l a c k { < b r / > @ a p p l y t e x t - [ 2 4 p x ] f o n t - b l a c k t e x t - b l a c k ; < b r / > } < b r / > < b r / > . t e x t - 2 0 - m e d i u m { < b r / > @ a p p l y f o n t - m e d i u m t e x t - [ 2 0 p x ] t e x t - b l a c k ; < b r / > } < b r / > < b r / > . t e x t - 1 6 - m e d i u m { < b r / > @ a p p l y f o n t - m e d i u m t e x t - [ 1 6 p x ] t e x t - b l a c k ; < b r / > } < b r / > < b r / > . t e x t - 1 4 - n o r m a l { < b r / > @ a p p l y f o n t - n o r m a l t e x t - s m t e x t - w h i t e ; < b r / > } < b r / > < b r / > . p i n k _ c o n t a i n e r { < b r / > @ a p p l y w - f u l l b g - p r i m a r y m i n - h - [ 5 3 0 p x ] f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r f l e x - c o l p y - 1 0 p x - 6 ; < b r / > } < b r / > < b r / > . t a g { < b r / > @ a p p l y b g - s e c o n d a r y p x - 6 p y - 3 f o n t - w o r k - s a n s f o n t - b o l d r o u n d e d - s m u p p e r c a s e r e l a t i v e t a g - t r i ; < b r / > } < b r / > < b r / > . h e a d i n g { < b r / > @ a p p l y u p p e r c a s e b g - b l a c k p x - 6 p y - 3 f o n t - w o r k - s a n s f o n t - e x t r a b o l d t e x t - w h i t e s m : t e x t - [ 5 4 p x ] s m : l e a d i n g - [ 6 4 p x ] t e x t - [ 3 6 p x ] l e a d i n g - [ 4 6 p x ] m a x - w - 5 x l t e x t - c e n t e r m y - 5 ; < b r / > } < b r / > < b r / > . s u b - h e a d i n g { < b r / > @ a p p l y f o n t - m e d i u m t e x t - [ 2 0 p x ] t e x t - w h i t e m a x - w - 2 x l t e x t - c e n t e r b r e a k - w o r d s ; < b r / > } < b r / > < b r / > . s e c t i o n _ c o n t a i n e r { < b r / > @ a p p l y p x - 6 p y - 1 0 m a x - w - 7 x l m x - a u t o ; < b r / > }

.card_grid {
@apply grid md:grid-cols-3 sm:grid-cols-2 gap-5;
}

.card_grid-sm {
@apply grid sm:grid-cols-2 gap-5;
}

.no-result {
@apply text-black-100 text-sm font-normal;
}

/* profile */
.profile_container {
@apply w-full pb-10 pt-20 px-6 max-w-7xl mx-auto lg:flex-row flex-col flex gap-10;
}

.profile_card {
@apply w-80 px-6 pb-6 pt-20 flex flex-col justify-center items-center bg-primary border-[5px] border-black shadow-100 rounded-[30px] relative z-0 h-fit max-lg:w-full;
}

.profile_title {
@apply w-11/12 bg-white border-[5px] border-black rounded-[20px] px-5 py-3 absolute -top-9 after:absolute after:content-[''] after:-top-1 after:right-0 after:-skew-y-6 after:bg-black after:-z-[1] after:rounded-[20px] after:w-full after:h-[60px] before:absolute before:content-[''] before:-bottom-1 before:left-0 before:-skew-y-6 before:w-full before:h-[60px] before:bg-black before:-z-[1] before:rounded-[20px] shadow-100;
}

.profile_image {
@apply rounded-full object-cover border-[3px] border-black;
}

/* idea details */
.divider {
@apply border-dotted bg-zinc-400 max-w-4xl my-10 mx-auto;
}

.view_skeleton {
@apply bg-zinc-400 h-10 w-24 rounded-lg fixed bottom-3 right-3;
}

/* navbar */
.avatar {
@apply p-0 focus-visible:ring-0 bg-none rounded-full drop-shadow-md !important;
}

.dropdown-menu {
@apply w-56 border-[5px] border-black bg-white p-5 rounded-2xl !important;
}

.login {
@apply border-[5px] py-4 border-black bg-white text-black relative shadow-100 font-work-sans font-medium hover:shadow-none transition-all duration-500 !important;
}

/* searchform */
.search-form {
@apply max-w-3xl w-full min-h-[80px] bg-white border-[5px] border-black rounded-[80px] text-[24px] mt-8 px-5 flex flex-row items-center gap-5;
}

.search-input {
@apply flex-1 font-bold placeholder:font-semibold placeholder:text-black-100 w-full h-auto outline-none;
}

.search-btn {
@apply size-[50px] rounded-full bg-black flex justify-center items-center !important;
}

/* startupcard */
.startup-card {
@apply bg-white border-[5px] border-black py-6 px-5 rounded-[22px] shadow-200 hover:border-primary transition-all duration-500 hover:shadow-300 hover:bg-primary-100;
}

.startup-card_date {
@apply font-medium text-[16px] bg-primary-100 px-4 py-2 rounded-full group-hover:bg-white-100;
}

.startup-card_desc {
@apply font-normal text-[16px] line-clamp-2 my-3 text-black-100 break-all;
}

.startup-card_img {
@apply w-full h-[164px] rounded-[10px] object-cover;
}

.startup-card_btn {
@apply rounded-full bg-black-200 font-medium text-[16px] text-white px-5 py-3 !important;
}

.startup-card_skeleton {
@apply w-full h-96 rounded-[22px] bg-zinc-400;
}

/* startupform */
.startup-form {
@apply max-w-2xl mx-auto bg-white my-10 space-y-8 px-6;
}

.startup-form_label {
@apply font-bold text-[18px] text-black uppercase;
}

.startup-form_input {
@apply border-[3px] border-black px-5 py-7 text-[18px] text-black font-semibold rounded-full mt-3 placeholder:text-black-300 !important;
}

.startup-form_textarea {
@apply border-[3px] border-black p-5 text-[18px] text-black font-semibold rounded-[20px] mt-3 placeholder:text-black-300 !important;
}

.startup-form_error {
@apply text-red-500 mt-2 ml-5;
}

.startup-form_editor {
@apply mt-3 border-[3px] border-black text-[18px] text-black font-semibold placeholder:text-black-300 !important;
}

.startup-form_btn {
@apply bg-primary border-[4px] border-black rounded-full p-5 min-h-[70px] w-full font-bold text-[18px] !important;
}

/* view */
.view-container {
@apply flex justify-end items-center mt-5 fixed bottom-3 right-3;
}

.view-text {
@apply font-medium text-[16px] bg-primary-100 px-4 py-2 rounded-lg capitalize;
}

.category-tag {
@apply font-medium text-[16px] bg-primary-100 px-4 py-2 rounded-full;
}

.pattern {
background-image: linear-gradient(
to right,
transparent 49.5%,
rgba(251, 232, 67, 0.2) 49.5%,
rgba(251, 232, 67, 0.6) 50.5%,
transparent 50.5%
);
background-size: 5% 100%;
background-position: center;
background-repeat: repeat-x;
}

.tag-tri {
@apply before:content-[''] before:absolute before:top-2 before:left-2 before:border-t-[10px] before:border-t-black before:border-r-[10px] before:border-r-transparent after:content-[''] after:absolute after:bottom-2 after:right-2 after:border-b-[10px] after:border-b-black after:border-l-[10px] after:border-l-transparent;
}
}

.w-md-editor-toolbar {
padding: 10px !important;
}
< /code>
И вот пример, в котором стиль не применяется: < /p>
export default function Home() {
return (


HOME


);
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... lity-class