Я создаю свою первую пользовательскую тему WordPress, используя tailpress, и мне удалось получить значение от настройщика WordPress с помощью get_theme_mod(). Но когда я пытаюсь вставить это значение в объявление класса попутного ветра, перестроенный файл не распознает мой класс. Кажется, что браузер отображает его правильно, но PHP запускается после создания классов попутного ветра? В настоящее время мой код выглядит так:
В верхней части файла я получаю значение PHP:
<?php
// variables from theme-settings (customize)
$GLOBALS['border_width'] = get_theme_mod('border_width_setting_id')
?>
Затем я вставляю его в класс попутного ветра:
<div id = "content" class = "... border-x-[<?php echo $GLOBALS['border_width'] ?>px] ...">
В браузере выглядит нормально:
но этот класс границы попутного ветра создается только в том случае, если я укажу его в файле PHP статически без использования PHP, например: border-x-[80px]
. Он не работает с динамическим значением PHP, как показано выше. Как я могу заставить PHP и попутный ветер работать вместе? Я слышал, что это как-то связано с PostCSS?
Я использую вкладку без кеша (отключена на вкладке сети Chrome) и автоматическую перезагрузку синхронизации с браузером :)
С PHP проблем нет. При работе с динамическими классами Tailwind не может читать их на лету, так как работает с исходными файлами. Поэтому вместо этого вы можете использовать атрибут стиля для таких динамических значений.
<div class = "border-x-[line-width:var(--my-border)]" style = "--my-border: <?php echo $GLOBALS['border_width'] ?>px">
или любой другой способ укладки. Если у вас есть предопределенный список border_width_setting_id
(например, 40, 80, 120), вы можете добавить в безопасный список его.
Можете ли вы подробнее рассказать о своем примере переменной css? Как это работает с попутным ветром? Я такого раньше не видел и мне непонятно зачем нужна line-width:
часть
Вместо жестко запрограммированного значения вы передаете переменную CSS var(--my-border)
— так имя вашего класса не изменится (оно всегда будет border-x-[line-width:var(--my-border)]
), и Tailwind сможет прочитать его как есть во время компиляции. Все, что вам нужно сделать, это установить свойство переменной в атрибуте стиля или где-либо еще. line-width:
— это просто модификатор, иначе Tailwind будет рассматривать значение как цвет (например, border-red-500
)
Могу добавить: When using arbitrary values in brackets, Tailwind converts the arbitrary value directly to a CSS property,
это работает после очистки кеша и жесткой перезагрузки? (Ctrl + F5)