Как добавить цвет оклч в список безопасных для попутного ветра

Я пытаюсь изменить цвет от daisyUI до списка безопасных вариантов попутного ветра, но, похоже, это не работает.

хвостовой ветер.config.ts

const config: Config = {
  safelist: [
    'bg-[oklch(94.51% 0.179 104.32)]', // cyberpunk
  ],

}

и я пытаюсь использовать его так:

страница.tsx

export default async function Home() {
  return (
    <main className = "bg-[oklch(94.51% 0.179 104.32)]">
      page content...
    </main>
  );
}

Но это не работает.

tailwind-css daisyui

20.04.2024 17:31

Ускоренная стилизация компонентов React Native с помощью NativeWind

Как сделать компонент справочного центра с помощью TailwindCSS

Справочный центр - это веб-сайт, где клиенты могут найти ответы на свои вопросы и решения своих проблем. Созданный для решения многих распространенных...

REACT и NEXT JS вместе с Tailwind CSS

Наличие собственного или персонального сайта необходимо в современном мире, а сочетание React и Next JS позволяет разработчику сделать это за меньшее...

Современные подходы к организации и работе с CSS в проекте

Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...

137

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Если вы используете его в page.tsx и этот файл покрыт content файлом glob в конфигурации Tailwind, вам не нужно добавлять его в safelist. Вместо этого вам нужно будет экранировать пробелы подчеркиванием (_), чтобы Tailwind сгенерировал соответствующее правило CSS:

<main className = "bg-[oklch(94.51%_0.179_104.32)]">

Или, если page.tsx не покрыт content файлом glob, тогда в safelist:

const config: Config = {
  safelist: [
    'bg-[oklch(94.51%_0.179_104.32)]', // cyberpunk

это работает как шарм, большое спасибо! На самом деле вышеописанный случай является упрощенным. На самом деле я создаю селектор темы и хочу показать цвета темы. Итак, мне нужно получить все темы daisyUI и сопоставить ключи объекта в js. В результате мне нужно было сделать в коде что-то вроде этого: const bgColor = bg-[${themes[theme]['base-100'].replace(/ /g, '_')}];

— 20.04.2024 21:19

20.04.2024 17:39