Obfus-Tail automatically supports dark and light theme switching through the power of Tailwind CSS variants. When you use dark mode prefixes in your classes, they're preserved and work seamlessly with the generated obfuscated CSS.
The obfuscation script includes a special CSS directive that enables dark mode support:
/* Auto-generated in obfuscated-styles.css */
@custom-variant dark (&:where(.dark, .dark *));
This CSS directive is the key to making dark mode work with obfuscated classes:
@custom-variant dark: Creates a custom variant named dark that can be used with @apply&:where(.dark, .dark *): Defines when the dark variant should apply:
.dark: When the element itself has the dark class.dark *: When any parent element has the dark classwhere() pseudo-class: Adds specificity without increasing weightWhen you write dark:bg-gray-900 in your JSX:
x1y2z3.x1y2z3 {
@apply bg-gray-900;
}
@custom-variant dark directive makes this rule only apply when .dark is presentThis directive ensures that any class with dark: prefix will only apply when the .dark class is present on an element or its parent, making theme switching seamless and performant.
I tried using @variant dark in the CSS class, but it doesn't work properly:
.o7ULEVz8 {
@apply inline-flex justify-center w-fit mx-auto items-center gap-1 bg-white border py-0.5 pl-0.5 pr-3 text-xs;
@variant dark {
@apply bg-blue-400 text-white;
}
}
However, this approach .dark works perfectly:
.R5FZb6Dk {
@apply mb-4 rounded bg-blue-100 p-2 text-blue-500;
}
.dark .R5FZb6Dk {
@apply bg-blue-400 text-white;
}
The second method works because it directly targets the obfuscated class when the .dark class is present on a parent element, which is exactly how the @custom-variant dark directive is designed to function.