Как подключить CDN скрипты Tailwind CSS в WordPress?

Чтобы подключить CDN скрипты Tailwind CSS и передать конфигурацию через PHP в WordPress, вам нужно выполнить несколько шагов:

1. Использование хука wp_enqueue_scripts для подключения Tailwind CSS и вашего кастомного скрипта с конфигурацией.
2. Пересборка конфигурации tailwind.config через PHP массив, а затем конвертация его в JSON формат для использования в JavaScript.

Вот пример кода для этого:

function enqueue_tailwind_cdn() {
    // Подключаем Tailwind CSS через CDN
    wp_enqueue_script('tailwind-cdn', 'https://cdn.tailwindcss.com', array(), null, true);

    // Создаем конфигурацию Tailwind в PHP
    $tailwind_config = array(
        'theme' => array(
            'extend' => array(
                'colors' => array(
                    'clifford' => '#da373d', // Ваши кастомные цвета
                ),
            ),
        ),
    );

    // Преобразуем массив в JSON
    $tailwind_config_json = json_encode($tailwind_config);

    // Добавляем скрипт для настройки Tailwind с конфигурацией
    wp_add_inline_script('tailwind-cdn', "
        tailwind.config = $tailwind_config_json;
    ");
}

add_action('wp_enqueue_scripts', 'enqueue_tailwind_cdn');

Пояснение:

1. Подключение Tailwind CSS через CDN:
   • wp_enqueue_script('tailwind-cdn', 'https://cdn.tailwindcss.com', array(), null, true); — подключает Tailwind CSS с CDN.
   • Параметр true в функции wp_enqueue_script указывает, что скрипт должен быть загружен внизу страницы.
2. Конфигурация Tailwind через PHP массив:
   • Мы создаем массив конфигурации, где в разделе extend добавляем ваши кастомные стили (например, кастомный цвет clifford).
3. Конвертация массива в JSON:
   • Используем json_encode() для конвертации PHP массива в JSON, который можно вставить в JavaScript.
4. Добавление скрипта с конфигурацией в страницу:
   • Функция wp_add_inline_script вставляет ваш JSON конфиг прямо в код страницы, после подключения основного скрипта Tailwind.

Этот код подключит Tailwind CSS через CDN и настроит конфигурацию темы, расширяя ее с добавлением кастомных цветов или других параметров.