Динамические пользовательские стили TailwindCSS не применяются в компонентах Next.js ⇐ Javascript

[Anonymous]

Описание:

Я создаю приложение Next.js с TailwindCSS, в котором я получаю данные об игроках из API Riot Games. Используя данные «уровня» игрока (например, «ИЗУМРУД»), я стремлюсь динамически устанавливать цвет фона контейнера. Однако некоторые динамические стили Tailwind не применяются.

Данные извлекаются следующим образом

Ранг лестницы: [ { идентификатор лиги: '', Тип очереди: 'RANKED_SOLO_5x5', уровень: 'ИЗУМРУДНЫЙ', ранг: «IV», summonerId: '', SummonerName: '', лигаОчки: 0, победы: 65, потери: 61, ветеран: ложь, неактивный: ложь, FreshBlood: правда, hotStreak: ложь } ] Имя класса контейнера div внешнего интерфейса выглядит следующим образом

className={`w-48 h-64 border-4 ${data ? getRankStyles(data.tier) : ''} ...`}

GetRankStyles — это созданная мной служебная функция, которая выглядит следующим образом

тип Уровень = | 'ЖЕЛЕЗО' | 'БРОНЗА' | 'СЕРЕБРО' | 'ЗОЛОТО' | 'ПЛАТИНУМ' | 'ИЗУМРУД' | 'АЛМАЗ' | 'ВЛАДЕЛЕЦ' | 'ГРОССМЕЙСТЕР' | «ЧЕЛЛЕНДЖЕР»; экспортировать const getRankStyles = (ранг: строка) => { console.log("Ранг пройден: ", ранг) // переключатель (ранг) { // случай 'ЖЕЛЕЗО': return `border-${rank} bg-${rank} bg-opacity-25`; // корпус 'БРОНЗА': // возвращаем 'border-tier-bronze bg-tier-bronze bg-opacity-25'; // корпус 'СЕРЕБРЯНЫЙ': // возвращаем 'border-tier-silver bg-tier-silver bg-opacity-25'; // случай 'ЗОЛОТО': // возвращаем 'border-tier-gold bg-tier-gold bg-opacity-25'; // случай 'ПЛАТИНА': // возвращаем 'border-tier-platinum bg-tier-platinum bg-opacity-25'; // случай 'ИЗУМРУДНЫЙ': // возвращаем 'border-tier-emerald bg-tier-emerald bg-opacity-25'; // случай 'АЛМАЗ': // возвращаем 'border-tier-diamond bg-tier-diamond bg-opacity-25'; // случай 'МАСТЕР': // возвращаем 'border-tier-master bg-tier-master bg-opacity-25'; // случай 'ГРАНДМАСТЕР': // возвращаем 'border-tier-grandmaster bg-tier-grandmaster bg-opacity-25'; // случай 'ЧЕЛЛЕНДЖЕР': // возвращаем 'border-tier-challenger bg-tier-challenger bg-opacity-25'; // по умолчанию: // возвращаем 'border-gray-400 bg-gray-400'; // } } Я включил закомментированный код, чтобы показать другие способы решения этой проблемы.

Конфигурация попутного ветра:

В файле Tailwind.config.js я добавил собственные цвета в theme.extend.colors и другие связанные свойства. Например:

Обнаруженные проблемы:

-Пользовательские стили из Tailwind.config.js, похоже, не применяются динамически к имени класса в зависимости от уровня игрока.
-Исправленные стили работают нормально.

Попытавшиеся шаги:
[*]Я проверил, что в инструментах разработчика браузера нет ошибок. На вкладке «Элементы» отображается применяемый класс. Но на вкладке «Стили» стили не отображаются. Кажется, здесь также нет пересекающихся стилей. [*]Проверил postcss.config.js на наличие правильных плагинов. [*]Поигрался с массивом контента в Tailwind.config.js и попробовал отключить очистку. [*]Обеспечена правильная интеграция TailwindCSS с Next.js.
Будем признательны за любые идеи и предложения.

Это мой файл Tailwind.config
импортировать тип { Config } из 'tailwindcss' константная конфигурация: Конфиг = { содержание: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './компоненты/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], тема: { продлевать: { цвета: { 'бунт-тьма': '#2D2D2D', бунт: { PrimaryRed: '#d13639', вторичныйкрасный: '#F12B15', черный: '#000000', серыйЧерный: '#2D2D2D', белый: '#FFFFFF' }, ржу не могу: { PrimaryBlue: '#0bc6e3', светлееСиний: '#CDFAFA', темнееСиний: '#0A1428', функциональностьЗолото: '#e0b667', лолкнопка: '#0AC8B9', lolbuttonHover: '#0A323C', buttonText: '#0A323C', buttonTextHover: '#0AC8B9', }, цвет границы: { ЖЕЛЕЗО: '#43464B', БРОНЗА: '#8B4513', СЕРЕБРЯНЫЙ: '#C0C0C0', ЗОЛОТО: '#FFD700', ПЛАТИНА: '#E5E4E2', ИЗУМРУД: '#50C878', АЛМАЗ: '#1E90FF', МАСТЕР: '#9932CC', ГРАНДМАСТЕР: '#4169E1', ВЫЗЫВАЮЩИЙ: '#00008B', }, фоновый цвет: { 'riot-card': '#5B5A56', 'бунт-красный': '#ff4248', 'riot-gray1': '#A09B8C', 'riot-grey1.5': '#5B5A56', 'riot-gray2': '#3C3C41', 'riot-grey3': '#1E2328', ЖЕЛЕЗО: '#43464B', БРОНЗА: '#8B4513', СЕРЕБРЯНЫЙ: '#C0C0C0', ЗОЛОТО: '#FFD700', ПЛАТИНА: '#E5E4E2', ИЗУМРУД: '#50C878', АЛМАЗ: '#1E90FF', МАСТЕР: '#9932CC', ГРАНДМАСТЕР: '#4169E1', ВЫЗЫВАЮЩИЙ: '#00008B', }, изображение на заднем плане: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'градиент-конический': 'conic-gradient(от 180 градусов при 50% 50%, var(--tw-gradient-stops))', } }, }, }, плагины: [], } экспорт конфигурации по умолчанию;