No video :(

Why is Radix Themes Built This Way - A Solution

Подписаться 20 тыс.

Просмотров 5 тыс.

50% 1

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.f...
💬 Join us on Discord: www.frontend.f...
🔗 Check the code and read the article: www.frontend.f...
🔗 Read more about cascade layers in article form here: www.frontend.f...
🔗 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

Опубликовано:

16 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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!

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

@empte 9 месяцев назад

Thank you! This was so incredibly helpful.

@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

@elenamikhaylova5086 6 месяцев назад

this man knows CSS!

@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

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

@dailydose7772 11 месяцев назад

Nice work bro, great solution and great video as usual

@digitalsahara6670 11 месяцев назад

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

@frontendfyi 11 месяцев назад

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!

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

@zindev 10 месяцев назад

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

@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 RU-vid. Check fe.fyi/pro. Prices will increase once the course releases!

@chi-mf1cx 11 месяцев назад

good job buddy!

@fr3fou 6 месяцев назад

what's the editor font you use?

@frontendfyi 6 месяцев назад

It's Recursive Mono Casual Static

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