Theming Tailwind with CSS Variables
Вставка
- Опубліковано 27 лип 2024
- 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.
Source code: play.tailwindcss.com/YelhilBeHb - Наука та технологія
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
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.
I'm going nuts with Tailwind, I love it.
Yeah me two, it’s great
Ditto!!
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!
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.
Perfect, this is exactly what I was looking for! I thought it was not possible to do themes with Tailwind.
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
These videos are really excellent, awesome developer experience!
your guys make tailwind CSS custom feature amazing!
Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic!
Thanks UA-cam and you guys!
Awesome!
it's spooky sometimes, right 😄
I can not stop watching your videos, really great!! Thanks a lot!
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.
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.
Very helpful tutorial, few days ago I tried to build my app with custom theme colors, but this is more useful 🤯
Will use this video as inspiration to theme my website soon, thanks for the great explanation and approach as always
«Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍
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 }
Thank you from France, your video is a game changer for me :)
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!
A list of your vscode extensions would be appreciated
Agreed
Honestly +1
I believe the one that highlights the css colors is a plugin called Color Hight (naumovs.color-highlight) by Sergii Naumov
Any one know how extension to convert color Hex to RGBA and vise versa?
@@DanielDrummond2k6 hex-to-rgba by dakshmiglani
... and that is it!! LOL Fantastic and you sometimes make me laugh a little which is a giant bonus; Tailwind really has a gem with you and the way you do these videos! How long did they look to find a coder that is ALSO great in front of a camera lol! Rock on!
So awesome 😍😍😍 simple as well with a great quality and some magic final tricks 😁👌🎉🎉
Thanks it was really helpfull
Was trying to figure it out for a long time
This looks heavy and good to be done
Love your videos and tailwindcss!
Really like this series
Thank you so much for this video. Learned a lot!
Great stuff, a lot of useful info, thank you 😊
You make it look insanely easy. wait, maybe it is that easy!
Great one, would be nice to have a follow up part about the best way to add/implement dark mode to the theming
Yes!
Thank you so much! It's so useful ❤️
Thank u. Wonderful explanation.
Should my brain hurt after watching this? LOL It does.
I’m sure I’ll have to watch this series a couple of times through since my CSS skills are so-so.
But, that said, I’m very impressed so far with Tailwind’s approach. It seems now we finally have CSS that is a programming language than whatever it was previously.
I would just specify colors for specific states in the theme without the hassle of support bg-opacity, etc. It may seem odd, but if the idea is to give control to the theme of defining colors, then it makes more sense that it also controls the opacity.
There are cases where you want to use a different opacity based on the contrast, as color is perceived differently based on the background and foreground contrast and the opacity will look lighter/darker depending on this. This is also why dark themes aren't simply just inverting the colors; contrast matters.
Good tutorials, Thank you very much :)
Thank you. Great tutorial
What a masterpiece!
Best teacher ever! Thanks for this tutorial!
Superb content. 👏👏👏
Great video!
The best tutorial ❤
Amazing, I love it.
Nice video, thank you.
this video was awesome
This is super cool.
Thanks for tips, tricks and technics
Wow
14:40 thats amazing!!!!!!!!!!
great explanation
The microphone is so big 🤣
Thanks for the content as always!
I always more appreciate good voice quality than a cam!
I am trying to implement tailwind css struggling a lot but feeling confident as well
The return value could be streamlined as an implicit return, but I would at least set the default @ 22:00 with ({ opacityValue = 1 }) rather than setting a guard check
I have the feeling (but I could be totally wrong) that opacityValue is not the value itself but the name of the CSS variable for the opacity (--tw-bg-opacity)
@@LorenzoLeonardini you are right, it’s an object destruction syntax { … }
This is GOLD
Amazing video! It would really helpful if you could share a gist or repo with the code too... also would love it if you could name a few of the plugins you're using on vscode.. notably the css preview when you hover a class and the one that highlights colors with their actual color. Many thanks!!
thiank u.. i am happy with this video.
Is this the theming strategy you suggest we use with the new JIT compiler in tailwindcss?
Tailwind is love, tailwind is life.
Just a small suggestion to make check inside withOpacity more succinct, you can just check for undefined like so opacityValue ?? 1 that way if it will be undefined it will default to 1, note that I'm using nullish coalescing operator here to support 0 values. It's natively supported in Node since v.14
Great video, thanks! It's a little outdated I think, as you can now define hex colours inside the tailwind config `theme`, and opacity variants will work without needing to add the logic yourself.
Wow! That is the business!
Using JS functions into CSS.. so cool
Curious: is this vscode preview plugin public? Can't find it!
I am thinking of using it to implement light/dark theme on user selection, so, do I have to change the wrapper class conditionally or dark:my-wrapper would work just like usual html with dark class ???
Great work, Thank you.
27:05 where did the fly came from :)
Great tutorial thank you!
Quick question: is it possible to use the default tailwind colour palette in the css variables instead of the hex/rgb hardcoded values?
In other words, something like:
-colour-primary: Colors.red.700
Instead of
-colour-primary: rgb(255,179,255)
Neat! Great video, it's well-explained and very easy to understand. Thanks!
I have a question: can we use any existing tailwind colors (ie, text/bg-red-500)?
Using the approach in the video, it looks like the same color may be redefined multiple times.
aka, is it possible to create something like an Alias Token?
Or is the only way to do this via the tailwind config (where we have access to the colors)?
nvm, I think I found how:
--color-fill: theme('colors.red.700');
Kinda feels like with naming colours you're getting back into some of the "naming is hard" territory that utilities were meant to solve for us. But I don't see any other way around it.
I'm working on my first Tailwind application at the moment which will eventually be forked off and used as the basis for many other apps. How the follow on apps get re-coloured without a massive search and replace to change a whole bunch of utilities was on my mind, so this is well timed.
So good
Awesome.
Can you tell me that which fonts you're using for your editor. I really love it.
When it came to typography, there are some needed changes in different screen sizes, how do you define them in this method?
Thanks a lot
but what if i want to reuse colors from the palette like --accent-medium: theme('colors.pink.700'); and not hardcoding rgb values? theme('colors.pink.700') is hex value and I need to convert to rgb somewhere
Why split and convert the hex code to rgb values in your with opacity function instead of using the vscode plug-in? Javascript has parseint-function that can do this.
What's the plugin you are to preview colors in css?
good question ! its in the internet.
The opacity function doesn't work in Tailwind CSS v3.0.24. However, returning `var(${variableName})` works without wrapping `rgb` or `rgba`
Thanks for the whole Playlist ...your microphone is getting bigger with every video ;-)
Great!
Is there any way to enable color preview using this approach?
You can still use rgb(0,0,0,1) in your css file for color preview but need to remove "rgb" and "alpha" in the "withOpacity" function
Does anyone know how to get that preview panel in VSCode I can't find one that looks that good
Usefull Thanks
I implemented multiple themes on a site of mine last year. 12 themes light + dark mode. It was super simple, though I _think_ this may be even easier. Can't wait to try it out!
Note: not sure why my last comment was deleted? Due to link?
Not sure either, I did see the notification email though originally! We didn’t delete it, must be a UA-cam thing probably link related like you said 🤔
@@TailwindLabs probably. Not worried about it. Thanks for the video, the timing is perfect.
Could you please share your implementation. Would like to learn more about theming ❤️ Thanks 👍in advance
@david Parker ❤️❤️
First comment! 🥳 Thanks for this video 🙏🏾
This looks amazing, but I can't seem to get it to work in a new Angular project (v11.2). Neither with CSS or SCSS. Any news on that?
did you manage to get it working? seems to work on development but not in production
Genius :-)
i have a problem ,if we set opacity-x for bg-theme-x not only bg opaicty changed even text opacity turn chnaged , what to do in this situation please guide
You only use textColor and backgroundColor, so I need go to each tailwind config and add those again, like "divideColor", "caretColor" etc. ???
Any reason you are using CSS Custom Properties rather than plugins that add the utilities and use theme properties with the values defined directly in the theme?
How would one go about setting up border colors this way?
👏👏👏
Thank you! Could you provide the code somewhere?
Make a video on RTL with tailwind
When I use Vue-Cli and run a build only the :root theme is inside the generated css file, why is that?
Thank you young James Hetfield!
Damn! I rarely comment, but this one: 👍!
how about dark theme? is it just dark:theme-name?
Why doesn't tailwind include classes like primary by default like other popular frameworks like bootstrap and uikit?
About new tailwindcss/jit , i have problemes with postcss 8 in vue 3 project , how can i do please?
Try searching for a similar issue in the tailwindcss/jit github repo. If you don't find an existing issue, you can add one of your own. It could be that you are missing the NODE_ENV=development variable. Instructions for this is in the readme file in the repo.
Thank you. Please, share the code link
text-skin-base is confusing, sounds very close to text-base (size), what about text-skin-content ?
take a look at windicss with vite
It's possible to do this with React Native?
What is your VSCode theme?