Next.js Discord

Discord Forum

styling radix themes with TailwindCSS

Unanswered
Aditya Kirad posted this in #help-forum
Open in Discord
Aditya KiradOP
hey folks has anyone tried the radix themes I want styling it with tailwindcss and customising it's theme like I want to change it's default and heading font-family according to the docs I created new CSS file called theme-config.css and write this in the file 
.radix-themes {
  --default-font-family: var(--font-lato);
  --heading-font-family: var(--font-arvo);
}
and imported this in the root of my app but for some reason these variable were not applied also when I apply tailwind class to a radix component it doesn't works
also am I not supposed to to customize the dark theme of radix themes for eg I wanted to change the default background color of radix dark theme so I wrote this in theme-config.css file 
.dark, .dark-theme {
  --color-page-background: #17181f;
}

but It also didn't worked

15 Replies

@Ray check this out https://github.com/needim/radix-ui-themes-with-tailwind
Aditya KiradOP
I have already checked out this library my main concern is why the hell the classes in theme-config.css are not applying and the reason why most of the tailwind classes are not working on the radix themes components is that since tailwind is a utility first framework mostly all the classes have the css specifity of 1 and if you look at the css applied by the radix themes thier specifity is very high they are overpowering the tailwind ones
Ray
radix theme does not use tailwind, they use their own postcss
if you want to use tailwind, try radix primitives
Northern Wheatear
Can you check this workaround... I'm currently using it and it's working. Tailwind css styles are getting higher priority than radix's styles
https://github.com/radix-ui/themes/issues/109#issuecomment-1747345743
Let me know whether this works
@Ray radix theme does not use tailwind, they use their own postcss
Aditya KiradOP
when did I say radix themes is using tailwind why we are using radix themes because we want a consitent style across and that is what we are getting but what if you want customise the style of component little bit then it won't work for example take the example of the button component you want to show a error button if you through bg-red-500 it won't work due to very high specifity of radix classes most of the tailwind classes won't work and one thing more radix is known for accessible rich components then why the hell they are using the px unit isn't px bad for accessibilty
@Aditya Kirad yeah it's working for me also with all the benefit of radix themes
Northern Wheatear
Great 👍
Aditya KiradOP
but there is little problem in it which by some workaround I solved the problem is if you import radix theme styles in the global css file then tailwind base styles will override the radix theme base style which you really don't want so I grouped the tailwind base styles, radix base styles and tailwind utilites and components here is my workaround
@layer tw_base, radix_ui, tw_components_utilities;

@import "@radix-ui/themes/styles.css" layer(radix_ui);

@layer tw_base {
    @tailwind base;
}

@layer tw_components_utilities {
    @tailwind components;
    @tailwind utilities;
}
@Northern Wheatear Actually that is how styled component libraries are supposed to work. If we are using those components it's better to use their styles. 😅 If you want to make fully customised components with your own styles use radix primitives as <@743561772069421169> mentioned which is an unstyled library
Aditya KiradOP
I don't think radix themes is styled component library because if you see all the components in radix themes they are the same radix primitives all they did is provided you with some basic styles which will look good across your whole app and if you want some other style across whole app just go to the theme component change your styles their and boom styling is changed across whole so what i think is radix themes is not pure styled component library you can say it's semi styled
Aditya KiradOP
hey @Northern Wheatear what do you think what can be the reason behind radix using px unit for font-size and other property when we know px is bad accessibility
Northern Wheatear
Actually, I'm not sure about that... I use px sometimes for styling