Как вычислить ширину на основе классов темы?

Question

[Макс]

Мне нужно вычислить ширину из класса w-1/4. Пробовал использовать следующую конструкцию, но не выходит :(

<div class="w-[calc(theme(width.1/4)-theme(spacing.4))]">Lorem ipsum</div>

А вот это работает:

<div class="w-[calc(25%-theme(spacing.4))]">Lorem ipsum</div>

Answer 1

[5465]

Предполагая, что у вас есть доступ к переменной theme, содержащей объект с информацией о классах темы, вы можете попробовать следующий подход:

<div class="w-[calc(theme('width.1/4')-theme('spacing.4'))]">Lorem ipsum</div>

Здесь мы используем функцию theme() для извлечения значения соответствующего свойства из объекта темы. Обратите внимание, что мы обернули строковые значения свойств в кавычки.

Если вы хотите использовать проценты в качестве единицы измерения для ширины, вы можете сделать следующее:

<div class="w-[calc(theme('width.1/4')*100/theme('width.container')-theme('spacing.4'))]">Lorem ipsum</div>

Здесь мы сначала извлекаем значение свойства width.container из объекта темы, чтобы определить ширину контейнера в процентах. Затем мы умножаем ширину элемента (в долях от контейнера) на 100, чтобы получить процентное значение, которое можно использовать для установки ширины элемента.

Comments

[Макс]

По всякому пробовал, не работает :( Пробовал просто w-[theme(width.1/4)], так он 0.25rem выдаёт на выходе)
Я уже по-другому решил задачку, спасибо за содействие)