What CSS framework should I be using with Next.js? 🧐
About to start a new project and I'm stuck on which CSS framework to use.
I'm torn between:
- Tailwind
- Material UI
I love tailwind but Material has a great selection of ready-made components.
About to start a new project and I'm stuck on which CSS framework to use.
I'm torn between:
I love tailwind but Material has a great selection of ready-made components.
If you like ready-made component then Chakra is definitely going to be the way to go. It has pretty much every component you could potentially want. And if you want to kick it up a notch, you can go with Chakra Pro and pretty much have everything ready to go.
+1 for Chakra -- makes accessibility easier too.
Tailwind has a lot of fans. It is cool but my preference is Chakra, because if you use React, directly using css selectors is too much low level. What you want (at least me) is some components with a good API, DX-wise, which is not as easy as it sounds. Chakra has that (and Material UI too I suppose, but chakra is simpler). Chakra has a lot of smart components too, like toast or modal. In Tailwind, you'll have to do them yourself or use some other side projects.
Last but not least, Chakra components are designed with accessibility in mind, so you don't have to worry to much on this important aspect.
I used to choose Material UI for new projects, but now I've discovered Chakra UI and I really like it
Great question!
Tailwind if you are building a custom design.
Material UI if you just need a dashboard or UI that doesn’t look terrible.
They are solutions to different problems.
I would like to extend this answer to say, use Material UI if you want something that follows the guiding principles of Google's "Material Design".
https://material.io/design
You also have Tailwind UI if you want ready-made components.
https://tailwindui.com
I love this answer! Exactly my thinking