Вставьте значение класса tailwindcss с помощью php

Я создаю свою первую пользовательскую тему 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?

это работает после очистки кеша и жесткой перезагрузки? (Ctrl + F5)

PatricNox 14.11.2022 18:35

Я использую вкладку без кеша (отключена на вкладке сети Chrome) и автоматическую перезагрузку синхронизации с браузером :)

Neone 14.11.2022 18:53
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
1
2
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

С 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: часть

Neone 15.11.2022 10:06

Вместо жестко запрограммированного значения вы передаете переменную CSS var(--my-border) — так имя вашего класса не изменится (оно всегда будет border-x-[line-width:var(--my-border)]), и Tailwind сможет прочитать его как есть во время компиляции. Все, что вам нужно сделать, это установить свойство переменной в атрибуте стиля или где-либо еще. line-width: — это просто модификатор, иначе Tailwind будет рассматривать значение как цвет (например, border-red-500)

Ihar Aliakseyenka 15.11.2022 10:10

Могу добавить: When using arbitrary values in brackets, Tailwind converts the arbitrary value directly to a CSS property,

Neone 15.11.2022 19:11

Другие вопросы по теме