reactjs - W Tailwind v4, jak definiować niestandardowe kolory i używać ich w trybie ciemnym i jasnym bez użycia :dark?

Używam Tailwind CSS v4 i chcę zdefiniować własne kolory, które będą automatycznie przełączać się między trybami jasnym i ciemnym. Zamiast używać prefiksu dark: dla każdej klasy, chcę zarządzać zmianami kolorów za pomocą zmiennych CSS w moim projekcie React.

Oto, co próbuję osiągnąć:

1. Zdefiniuj niestandardowe kolory (np. primary, baseColor, textColor).
2. Automatycznie przełączaj te wartości w zależności od trybu jasnego lub ciemnego.
3. Unikaj używania dark: w każdej klasie dla lepszej konserwowalności.

Próbowałem dodawać zmienne CSS za pomocą :root i klasy dark, ale chcę upewnić się, że stosuję najlepsze praktyki dla Tailwind v4.

Jak mogę skonfigurować tailwind.config.ts i globalny CSS, aby to osiągnąć?

Odpowiedź #1

TailwindCSS v4

Od TailwindCSS w wersji 4 możesz dostosować wygląd kolorów dla dowolnej odmiany dark: używając @variant dark. Zobacz bg-pink w moim przykładzie.

• Ręczne przełączanie trybu ciemnego - Dokumentacja TailwindCSS v4
• Jak ręcznie przełączać tryb ciemny w TailwindCSS v4 - StackOverflow
• Jak korzystać z niestandardowych motywów kolorystycznych w TailwindCSS v4 - StackOverflow
• TailwindCSS v4 ciemny motyw według klasy nie działa bez tagu dark - StackOverflow
• Dyrektywa @custom-variant - Dokumentacja TailwindCSS v4
• Dyrektywa @variant - Dokumentacja TailwindCSS v4
• Dodawanie niestandardowych wariantów - Dokumentacja TailwindCSS v4
• Dyrektywa @theme - Dokumentacja TailwindCSS v4 - Konfiguracja oparta na CSS

document.querySelector('button').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

<script src="https://unpkg.com/@tailwindcss/browser"></script>
<style type="text/tailwindcss">
/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-pink: #eb6bd8;
}

@layer base {
  @variant dark {
    --color-pink: #8e0d7a;
  }
}
</style>

<button class="size-20 bg-pink dark:text-white">Click Here</button>
<div class="w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white">
  Lorem Ipsum
</div>

TailwindCSS v3

Przed wersją v4, w wersji v3, było to możliwe tylko wtedy, gdy wyraźnie wiedziałeś, jak zadeklarować dark:, co zazwyczaj robiono za pomocą .dark { ... }. Zobacz bg-pink w moim przykładzie.

• Ręczne przełączanie trybu ciemnego - Dokumentacja TailwindCSS v3
• Rozszerzanie domyślnego motywu - Dokumentacja TailwindCSS v3

tailwind.config = {
  darkMode: 'class', // from v3.4.1 can use 'selector' instead of this
  theme: {
    extend: {
      colors: {
        pink: 'var(--color-pink)',
      },
    },
  },
};

document.querySelector('button').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
:root {
  --color-pink: #eb6bd8;
}

.dark:root {
  --color-pink: #8e0d7a;
}
</style>

<button class="size-20 bg-pink dark:text-white">Click Here</button>
<div class="w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white">
  Lorem Ipsum
</div>

Odpowiedź #2

Możesz spróbować tego podejścia, aby zaimplementować to w Tailwind v4:

Po pierwsze, zdefiniuj zmienne CSS do tworzenia motywów.

/* globals.css */

/* Light Mode (Default) */
:root {
  --color-primary: #3b82f6; /* Blue-500 */
  --color-base: #ffffff;    /* White */
  --color-text: #1f2937;    /* Gray-800 */
}

/* Dark Mode */
.dark {
  --color-primary: #1e40af; /* Blue-900 */
  --color-base: #1f2937;    /* Gray-800 */
  --color-text: #f3f4f6;    /* Gray-100 */
}

2. W pliku tailwind.config.ts możesz go skonfigurować tak, aby używał tych zmiennych CSS, które zdefiniowałeś:

// tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class", // Enables manual dark mode toggling
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        base: "var(--color-base)",
        text: "var(--color-text)",
      },
    },
  },
  plugins: [],
};

export default config;

Teraz możesz używać tego w swoich komponentach React w następujący sposób:

<div className="bg-base text-text p-6 rounded-lg">
    <h1 className="text-primary text-2xl font-bold">Stack overflow</h1>
    <p>I love learning</p>
</div>

Klasy bg-base, text-text i text-primary będą automatycznie dostosowywać się w zależności od aktywnego motywu.

Możesz użyć localStorage do śledzenia aktualnego motywu lub biblioteki do zarządzania stanem, takiej jak Redux czy Zustand. Wybierz tę, która najlepiej odpowiada Twoim potrzebom. Mam nadzieję, że to pomoże rozwiązać Twój problem.