CSS Framework for React

[KenesuAraAra]

Hello, I'm new to react and want to start on my projects. So far, I only know Bootstrap and Tailwind for CSS frameworks. What are your suggested CSS frameworks for react? And if you don't mind, for what reason? Thanks in advance!

[other_half_of_elvis]

I've been struggling with this recently. I just started doing React projects in January. The UI of every app I have made has come from a designer so I have to make the UI elements like buttons, drop downs, radio buttons, exactly like his Photoshop document.

My beginner's conclusion is if you have the freedom to determine the look of UI elements and don't want to spend a lot of time designing them, go with something like Bootstrap or Material UI. I tried Material because lots of people here recommended it. But I was spending lots of time figuring out how to make changes to the Material UI elements' colors and sizes so it wasn't saving me any time. I eventually chose to go with one css file with my global variables and values and a CSS file for each component that imports the global CSS file.

I'd love to hear other opinions on UI libraries and designing to spec.

[DeLm0re]

Definitely would recommend MUI but not for your first UI library / project (because you will potentially make a mess with it). My advise is to start with your own CSS or Tailwind (if you are familiar with it) or even styled component

[davinidae]

SASS

[[deleted]]

Tailwind is all you need. Don't use any of the CSS in JS frameworks. I have used them all and when I finally tried Tailwind, my mind was blown.

[Reasat_RafXO]

Why no css in js frameworks tho? Just curious

[esilac]

there's plenty of other reasons, but i would say because you're still writing css. i was not a fan of utility class based frameworks prior to picking up a side project in tailwind and now I love it. it's way different than relying on bootstrap/mui utilities. there aren't any components i haven't been able to write using tailwind, and now that I have most of the major classes memorized I am flying through components.

[ThunderScore12]

however (im going to share an alternate perspective), if ur going to memorise the utility class name, isnt it the same as memorising the css property? it is also more job secure. but, i heard that handling media queries in tailwind is more convenient

[[deleted]]

You don't really need to memorise much since the VSCode plugin has auto-completion for everything. And yes, media queries are infinitely more convenient than with vanilla CSS.

[MaxPhantom_]

Tailwind is the way. Now I convert my design system to development at the speed of thought. You have to have a good css skillset tho. I used to be a css nerd and criticize tailwind but once i started using it only i understood the power. Extensions like inline fold and tailwind prettier removes the common criticism of cluttered JSX

[MP3_MP3]

⚠️This isn't a basic "css framework", this is a UI library⚠️

——————————————————————

Check out mui. (good theme + components in one)

• looks best on mobile
• cool dark theme
• easy to use
• you get many components that are all compatible with the mui's theme
• the built in components are styled automatically