В Tailwindcss V4 настройка обертки Div не работает, как и ожидалось ⇐ Html

[Anonymous]

В настоящее время я практикую Tailwind V4, разработав проект с использованием HTML, Vanilla JS и Tailwind V4.
для настройки точек останова и контейнера я сослался на то, как перезаписать ширину контейнера в Tailwindcss V4?. Точки останова и другие работают нормально, но максимальная ширина контейнера не работает. Требование состоит в том, что после экрана больше или равного 1900px ширина контейнера должна быть 1440px. Было бы большой помощью, если бы кто -то мог протянуть мне руку. Мой код заключается в следующем < /p>

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

{
"dependencies": {
"@tailwindcss/cli": "^4.1.11",
"tailwindcss": "^4.1.11"
},
"scripts": {
"dev": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./assets/styles.css --watch"
}
}< /code>
@font-face {
font-family: "Poppins";
src: url("../fonts/Poppins-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Poppins";
src: url("../fonts/Poppins-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
@import "tailwindcss";

@theme {
/* Font families */
--font-custom: "Poppins", "sans-serif";

/* Colors */
--color-blk: rgba(49, 49, 49, 1);
--color-gr: rgba(6, 166, 79, 1);
--color-blue: rgba(144, 189, 248, 1);

/* Breakpoints */
--breakpoint-*: initial; /* because of px-based breakpoints disable default rem-based breakpoints */
--breakpoint-sm: 575px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-2xl: 1400px;
--breakpoint-3xl: 1900px;

/* Container specific breakpoints */
--container-*: initial; /* because of px-based breakpoints disable default rem-based breakpoints */
--container-3xl: 1440px;
}

@utility container {
margin-inline: auto; /* center */
padding-inline: 2rem;
}

@layer base {
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
outline: none;
}
html {
scroll-behavior: smooth;
font-size: 62.5%;
box-sizing: border-box;
}
body {
@apply font-custom text-[1.6rem];
}
a {
@apply no-underline;
}
p {
@apply text-[1.6rem];
}
}< /code>










Hello world!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.



Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, officiis soluta! Unde dolorum, officia ex ab distinctio iusto, repellendus
maiores doloribus numquam iste incidunt tempore labore! Incidunt voluptatem non quibusdam!

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