© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•4mo ago•
1 reply
Matthew

Tailwind Themes

Is it possible to have 2 themes in a css file:
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-header: var(--color-gray-50);
    --color-root: var(--color-white);
    --color-border: var(--color-gray-100);
    --color-compat-card: oklch(0.898 0 89.876);
    --color-text: var(--color-black);
}

@theme .dark {
    --color-header: var(--color-gray-950);
    --color-root: oklch(0.19 0.03 269.8 / 1);
    --color-border: var(--color-gray-700);
    --color-compat-card: oklch(0.25 0.02 269.25);
    --color-text: var(--color-white);
}
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-header: var(--color-gray-50);
    --color-root: var(--color-white);
    --color-border: var(--color-gray-100);
    --color-compat-card: oklch(0.898 0 89.876);
    --color-text: var(--color-black);
}

@theme .dark {
    --color-header: var(--color-gray-950);
    --color-root: oklch(0.19 0.03 269.8 / 1);
    --color-border: var(--color-gray-700);
    --color-compat-card: oklch(0.25 0.02 269.25);
    --color-text: var(--color-white);
}

Then when switching themes, it picks the appropriate color. So if I have something like this:
<body class="bg-root">
    <Header />
    <slot />
</body>
<body class="bg-root">
    <Header />
    <slot />
</body>

Will
bg-root
bg-root
be the correct color depending on the them? I have done exactly this, and the color doesnt change. It ONLY works with dark:<....> and <...>. Am I missing something or is this just not possible?
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Themes brandLogo
FilamentFFilament / ❓┊help
3y ago
tailwind
FilamentFFilament / ❓┊help
17mo ago
tailwind v4 with tailwind v3
FilamentFFilament / ❓┊help
11mo ago
Filament themes with Webpack
FilamentFFilament / ❓┊help
13mo ago