Why is Radix Themes Built This Way

No video

Why is Radix Themes Built This Way - A Solution

Рет қаралды 5,354

Күн бұрын

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

Пікірлер: 35

@StephenRayner 10 ай бұрын

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.

@frontendfyi 10 ай бұрын

Thank you so much for your kind words, really appreciate it!

@empte 8 ай бұрын

Thank you! This was so incredibly helpful.

@roguesherlock 11 ай бұрын

I was just thinking about this today, this is such a simple and elegant solution! Thanks for sharing!

@frontendfyi 11 ай бұрын

And soooo powerful too! Great minds think alike!

@lazygamer6249 10 ай бұрын

That's why I love Shadcn.

@dailydose7772 11 ай бұрын

Nice work bro, great solution and great video as usual

@elenamikhaylova5086 6 ай бұрын

this man knows CSS!

@digitalsahara6670 10 ай бұрын

great video man! when is the course coming out? any ETA?

@frontendfyi 10 ай бұрын

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!

@zindev 10 ай бұрын

Nice! Could you tell me the name of your font?

@chi-mf1cx 11 ай бұрын

good job buddy!

@adoreos 3 ай бұрын

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!

@frontendfyi 3 ай бұрын

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.

@rexspydevil 8 ай бұрын

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

@frontendfyi 8 ай бұрын

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!

@rexspydevil 8 ай бұрын

@@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

@ananthsview8034 8 ай бұрын

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

@cristiancoppari Ай бұрын

im having the same issue with Next.js 14

@fr3fou 6 ай бұрын

what's the editor font you use?

@frontendfyi 5 ай бұрын

It's Recursive Mono Casual Static

@OnlyJavascript 10 ай бұрын

I don't see this is working for me? can u share link to the github repo?

@frontendfyi 10 ай бұрын

Check the description. The link is there.

@OnlyJavascript 10 ай бұрын

@@frontendfyi

@OnlyJavascript 10 ай бұрын

@@frontendfyi please provide github repo link. It's not working for me.

@juberpadyar8850 11 ай бұрын

please upload series beginner to advance on framer motion.

@frontendfyi 11 ай бұрын

First parts dropping this month! It will be as part of PRO though, not free on KZfaq. Check fe.fyi/pro. Prices will increase once the course releases!

@ananthsview8034 8 ай бұрын

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

@AndersonSousa33 10 ай бұрын

To me, it seems like Radix Themes is a rushed response to shadcn-ui. i'll still wait for the "Catalyst"

@frontendfyi 10 ай бұрын

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.

@chi-mf1cx 11 ай бұрын

bro next video on the same topic but with sass

@frontendfyi 11 ай бұрын

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!