I'm starting a new small project and I wanted to test out Tailwind Alpha while I'm writing boilerplate. I really wanted to use the new CSS theming since I use CSS variables anyway.

My major blocker would be using PostCSS Mixins. I use PostCSS Mixins to handle theming. It's not just light/dark mode, but theming in general.

To my surprise, even while early alpha, it works! Here's my test .pcss file.

@import "tailwindcss";
 
@define-mixin theme-light {
    --color-canvas: #ff0000;
}
 
@define-mixin theme-dark {
    --color-canvas: #00ff00;
}
 
@theme {
    @mixin theme-light;
}
 
@layer base {
    @media (prefers-color-scheme: light) {
        .theme--device {
            @mixin theme-light;
        }
    }
 
    @media (prefers-color-scheme: dark) {
        .theme--device {
            @mixin theme-dark;
        }
    }
 
    .theme--light {
        @mixin theme-light;
    }
 
    .theme--dark {
        @mixin theme-dark;
    }
}