Pure CSS variables magic #12341

namad · 2023-11-01T21:42:53Z

namad
Nov 1, 2023

Alrighty guys,

I am in love with Tailwind! It is super flexible and so easy to extend! I got my design system originally made on CSS variables and I wanted to explore what would it take to have it on tailwind. And it feels so good that I am keen to share my findings and discoveries with you ;)

How about this one - https://play.tailwindcss.com/DvL6TTPt0Y

Made with pure CSS variables featuring

Custom-made colour system based on CSS vars
Semi-transparent colours via color-mix()
Multiply drop shadows
Dark mode support on variables
Gradient on top of any colour via background-blend-mode: overlay
Multi-colour gradient

To enable dark mode simply change "light" to "dark" in the very first child div inside the body

<!-- light mode -->
<body>
    <div class="light ..."></div>
</body>

<!-- dark mode -->
<body>
    <div class="dark ..."></div>
</body>

For some reason, I was not able to apply light and dark classes on HTML on BODY elements, it might be that this is how the playground works

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Pure CSS variables magic #12341

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Pure CSS variables magic #12341

Uh oh!

Uh oh!

namad Nov 1, 2023

Replies: 0 comments

namad
Nov 1, 2023