Тематический интервал, рассчитываемый на основе других тематических интервалов в CSS Tailwind
Макет моей страницы (фиксированная навигационная панель с относительным нижним колонтитулом и растущим разделом контента между ними) требует от меня выполнения некоторых расчетов высоты на основе высот других элементов.
Чтобы было немного понятнее, что происходит в моем проекте, я хочу использовать для этих элементов тематические интервалы.
то есть у меня есть сама панель навигации, волнистый SVG, действующий как граница нижней части панели навигации, и нижний колонтитул.
spacing: {
nav: '6rem',
wave: '4rem',
footer: '6rem'
}
было бы неплохо, если бы я мог сделать что-то вроде min-h-[calc(100dvh-nav-wave-footer], чтобы установить высоту оболочки содержимого, или установить mt-[calc(nav+wave)].
Сейчас я вижу два способа добиться этого, но оба они кажутся сомнительными.
Я мог бы добавить navwave в раздел тематических интервалов, равный «магическому» числу 10rem. Очевидно, это раздражает, когда вы пытаетесь обновить высоту одного из этих элементов и забыли изменить элемент navwave.
или я мог бы сделать это так: mt-[calc(theme('spacing.nav')+theme('spacing.wave'))] что довольно сложно, отрастить линию. Это значительно длиннее, чем любые другие директивы, которые я обычно использую, и поэтому работа с ними сильно отвлекает.
Итак, вместо того, чтобы проводить такие расчеты непосредственно в моем HTML, я хотел добавить в конфигурацию моей темы собственный интервал navwave, который выполняет эти вычисления автоматически.
spacing: {
nav: '6rem',
wave: '4rem',
navwave: "calc(theme('spacing.nav')+theme('spacing.wave'))"
}
...Именно тогда я наткнулся на проблему, ради которой пишу этот пост. По какой-то причине, если я сделаю это таким образом, преобразуется только одна из директив темы, и это заставляет браузер сказать, что это недопустимое свойство. Обратитесь к этим скриншотам для получения дополнительной информации:
Я сделал что-то не так? Или то, что я делаю, не поддерживается Tailwind (пока)?
Ответы 1
Вы можете использовать интервалы в качестве переменной в конфигурации:
const mySpacings = {
nav: '6rem',
wave: '4rem',
};
// …
spacing:
...mySpacings,
navwave: `calc(${mySpacings.nav} + ${mySpacings.wave})`,
}
const mySpacings = {
nav: '6rem',
wave: '4rem',
};
tailwind.config = {
theme: {
extend: {
spacing: {
...mySpacings,
navwave: `calc(${mySpacings.nav} + ${mySpacings.wave})`,
}
},
},
};<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "mt-navwave h-10 bg-red-500"></div>Это остановит магические числа, поскольку теперь мы используем именованные ссылки.
Кроме того, ваше решение тоже почти работает, вам нужно будет добавить пробелы вокруг операнда + для Tailwind (и браузера), чтобы правильно его интерпретировать:
navwave: "calc(theme('spacing.nav') + theme('spacing.wave'))"
tailwind.config = {
theme: {
extend: {
spacing: {
nav: '6rem',
wave: '4rem',
navwave: "calc(theme('spacing.nav') + theme('spacing.wave'))"
}
},
},
};<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "mt-navwave h-10 bg-red-500"></div>
Это дико, я никогда этого не понимал! Подробнее об этом я прочитал здесь