Why is Radix Themes Built This Way - A Solution
Вставка
- Опубліковано 20 лип 2024
- Last month the Radix team released Radix Themes. A very great library on top of their already amazing components. If the quality of their headless components tells me anything, this Radix Themes should be amazing!!
Unfortunately, even though their components are amazing, the way they wrote their CSS made me cry a little bit.. The specificity of their CSS selectors is SO high, it becomes impossible to quickly override a single style for a single button. !important hell is already knocking on your door!
But... Remember last week's video?.. This seems like a PERFECT use case for CSS Cascade Layers! In this video we'll explore if CSS Cascade Layers can help is with making it easier to override their styles (spoiler: they do!).
✨ Become a PRO today via www.frontend.fyi/pro
💬 Join us on Discord: www.frontend.fyi/discord
🔗 Check the code and read the article: www.frontend.fyi/v/fixing-rad...
🔗 Read more about cascade layers in article form here: www.frontend.fyi/v/css-cascad...
🔗 Last week's video about CSS Cascade Layers: • Still using !important...
👀 Timestamps
00:00 - Intro
00:17 - Brief look at Radix Themes
00:45 - Looking at the bad CSS Radix wrote
02:21 - The fix: CSS Cascade Layers!
02:48 - Add the cascade layers
03:53 - The tailwind classes now overrule radix ui
05:23 - Small note on using @ layer with Tailwind
06:00 - Outro
06:53 - Don't forget to check fe.fyi/pro
#css #radixthemes #cascadelayers #frontend #webdevelopment #frontendfyi - Наука та технологія
This video introduced me to your channel. It was short to the point and the speed you speak is a decent balance between to slow and fast.
Not too much bloat (re-explaining, intros / outros)
I learn something and that’s exactly why I clicked the video. Thank you.
Thank you so much for your kind words, really appreciate it!
Thank you! This was so incredibly helpful.
I was just thinking about this today, this is such a simple and elegant solution! Thanks for sharing!
And soooo powerful too! Great minds think alike!
That's why I love Shadcn.
Nice work bro, great solution and great video as usual
I totally agree with you. But about the solution - I mean, this works. But this isn't the way it's meant to be. Also, who of us like to see so much overrides? I much prefer using the non-styled primitives from Radix UI and style them using Tailwind CSS + cva, which is an approach implemented in shadcn and honestly works great for me so far!
100% agree with using the primitives. It’s also the only thing I use. This was only to illustrated how cascade layers can be of great help to you. I agree that radix themes is mainly meant to take it and use it like it is.
great video man! when is the course coming out? any ETA?
Building the course and platform around it is SO much more work than I anticipated 🤯 I'm currently working on getting the curriculum finished and the marketing page up (will probably be up next week!). After that it's full on recording. I will release the videos in batches, so you can start watching as early as possible. I'll also send out a newsletter with updates soon, so definitely subscribe (in the footer) if you haven't already.
Thanks for your patience, I really appreciate it!
this man knows CSS!
Nice! Could you tell me the name of your font?
good job buddy!
Thank you for sharing this but somehow it's not working for me
I am using next js 14
When I m investigating in developer window I couldn't find the radix layer applied at all.....please share some insight on this
Just happened to encounter this issue with someone else. It could be that you are importing the radix css file somewhere else still. A page or the global layout for example. You should make sure you only import it once, in the global.css file where you specify the layer. Hope this helps!
@@frontendfyiI have followed the same steps even copied the code from your corresponding article but still the same issue.
Below is the steps followed:
1. created a new nextjs 14 project
2. over wrote the code in global.css
3. In the root layout file I have just imported radix themes
4. Just added an button from radix themes and applied a tailwind bg-red-600 class.
The output is only the tailwind class is rendered not the radix theme and in the developer window I can see only tw_base layer applied.
Please help with some insights
I faced the same kind of problems, and now I cant see my radix ui layer on the developer window. all radix themes not applied on my page
im having the same issue with Next.js 14
what's the editor font you use?
It's Recursive Mono Casual Static
I don't see this is working for me? can u share link to the github repo?
Check the description. The link is there.
@@frontendfyi
@@frontendfyi please provide github repo link. It's not working for me.
I am using Next 14, I did the same way you did, and Now my Radix theme is not applied on my page. checked in the developer window, I can't see the radix_ui layer, Please guide me to fix the issue
please upload series beginner to advance on framer motion.
First parts dropping this month! It will be as part of PRO though, not free on UA-cam. Check fe.fyi/pro. Prices will increase once the course releases!
To me, it seems like Radix Themes is a rushed response to shadcn-ui. i'll still wait for the "Catalyst"
I think you could be right there yeah. Wanted themes to be so much better, since there primitives are very high class. Unfortunately imo it isn’t of the same quality. Despite the team absolutely working hard on it and with the best intentions.
bro next video on the same topic but with sass
Check the blog linked in the description too. At the bottom is a plain css example showing how this would work without tailwind as well!
Thanks a lot for this solution ❤🩹
is it working?