Theming Tailwind with CSS Variables

In this video, you'll learn how to build designs that support multiple themes in Tailwind CSS, leveraging the power of CSS variables. We also look at a common "gotcha" you might run into when trying to use color opacity utilities alongside colors defined as variables.

[jslbrt]

I'm going nuts with Tailwind, I love it.

[rfmiotto]

I was running into this just a couple days ago! What a perfect timing for this tutorial. Thank you Tailwind Labs for these videos. Please, keep coming up with high-quality materials like this.

[Andrey-ilrh]

I really like how flexible it is to style not only the full root document but each component individually. I already see how those variables can even be scoped inside the component itself to provide completely different styling rules for each individual component and not only colors, it basically allows for turning Tailwind into an ultimate utility-meta framework where classes become meta-information for a possible look. Requires a bit of a mental stretch in the beginning but gives ultimate powers!

[yashkhd]

I think your method is best one for implementing dynamic theming with tailwind CSS. I have seen bunch of other approaches but by far this one is cleanest one.

[friemae]

These videos are really excellent, awesome developer experience!

[ulvidamirli]

Perfect tutorial and that’s what I was looking for. Out of topic, but it would be perfect to see web design tutorials from you

[elie]

A list of your vscode extensions would be appreciated <3, great tutorial btw

[QueeeeenZ]

Perfect, this is exactly what I was looking for! I thought it was not possible to do themes with Tailwind.

[benthomson]

your guys make tailwind CSS custom feature amazing!

[weblearningd]

I can not stop watching your videos, really great!! Thanks a lot!

[SusanthCom]

Thank you so much ❤️ for this wonderful tutorial. Would love to see more possibilities of theming. Hope we can control more looks like, border radius, background image, polygon shapes, different svg based on theme. It will bring great change in looks apart from colour alone. 👍👍 Keep rocking.

[hniehxq]

Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic!
Thanks YouTube and you guys!
Awesome!

[akamfoad]

Will use this video as inspiration to theme my website soon, thanks for the great explanation and approach as always <3

[faraonch]

Fantastic demo! You could consider setting the default transparency value to 1 in function arg where you deconstruct the opacity value to avoid the if statement in the withOpacity.

[_CazaBobos]

I've been looking for this for very long. Thanks! It works amazingly with Next.js SSG

Just a little trick: instead of asking if opacityValue is undefined, you can use a nullish coalescence operator to assign a default value when it's null or undefinded. Example... ${ opacityvalue ?? 1 }

[addd]

Very helpful tutorial, few days ago I tried to build my app with custom theme colors, but this is more useful 🤯

[Andrey-ilrh]

I've heard this punch from many people who hate (don't know how to use) Tailwind - that it can't be used on a "themeable project", thanks for myth-busting this argument!

[paawfrance]

Thank you from France, your video is a game changer for me :)

[oliverp]

Great one, would be nice to have a follow up part about the best way to add/implement dark mode to the theming

[aleksandervitalevich]

«Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍