Как сделать Tailwindcss v4 на рабочем столе, первые точки останова ⇐ CSS

[Anonymous]

Раньше в Tailwind V3 вы можете просто перенастроить экранные запросы, чтобы работать на рабочем столе. Сделайте что-нибудь хорошо выглядеть на вашем большом экране компьютера, разделите, внесите настройки и, наконец, добраться до размера мобильного экрана, как SO: < /p>
export default {
theme: {
screens: {
'2xl': { max: '1535px' },
xl: { max: '1279px' },
lg: { max: '1023px' },
md: { max: '767px' },
sm: { max: '639px' },
},
},
};

< /code>
Многие разработчики (включая меня) просто не могут обернуть головы, начиная с крошечного экрана и размером проекта вверх на экраны на рабочем столе. Я хотел сделать то же самое, что и выше, в идиоматическом стиле V4, используя их новые методы конфигурации только для CSS, но кажется, что единственный вариант достижения этого-это настройка каждого префикса для каждой возможной опоры по отдельности (см. Ниже), в отличие от конфигурации v3, где он мог быть сделан глобально с несколькими линиями.@layer utilities {
/* xs: ≤479px */
@media (max-width: 479px) {
.xs\:w-40 { width: 10rem; }
.xs\:h-40 { height: 10rem; }
}

/* sm: ≤639px */
@media (max-width: 639px) {
.sm\:w-48 { width: 12rem; }
.sm\:h-48 { height: 12rem; }
}
...
}
< /code>
Я попытался искать некоторые V4-специфические решения этой проблемы, но кажется достаточно новой проблемой, не многие люди действительно справились с этим. Я упускаю какую-то конфигурацию или это было просто явно удалено, потому что «мобильный первый», и все?


Подробнее здесь: https://stackoverflow.com/questions/796 ... reakpoints