I've been playing around with Tailwind CSS and it's fantastic, however there are some limitations, such as developing custom components.
I am not stating that with Tailwind CSS, you cannot create custom components, but for a large scale project with tight deadlines, it's a lot of work, and you can't cover all edge cases such as accessibility, performance, and browser support, etc.
Hence, I believe Tailwind css combined with primitive component libraries are the future of React UI development. Let's discuss this topic below.
Currently, you are using MUI, Bootstrap, Ant UI, Chakra UI, and other components in React. These are wonderful libraries for designing web apps since they get much of the job done while making our lives easier until a custom design language is required. As these follow an opinionated design language.
Adding new design language (i.e. custom theme, look and feel of components, etc.) is essentially the same as writing custom CSS on top of an already existing theme. This is still possible by using the theme builders (which, by the way, only a few offer) provided by these UI libraries, but not everything is possible.
Also, using these libraries increase the bundle size unnecessary.
- Faster development because you are using it inside JSX/JS files only.
- In a team environment, there is no overwriting of styles making it almost bug free.
- No duplication of css classes, making bundle size smaller when built.
There are many other benefits that can be explored when using Tailwind CSS.
Primitive components - Components that are accessible but without styling, so you can personalise them anyway you want.
These are more like skeletons without css. Basically providing you with HTML like elements but without any opinionated design language.
These components are well tested on multiple browsers, platforms, and devices and deals with edge cases like focus management, keyboard navigation, event listeners, accessibility attributes, valid markup and screen reader support.
If you had to build these components from the ground up, could you even account for all the edge cases?
Use primitive components in projects where you have extremely specific design requirements
Another advantage is that it changes the way you create React components in general — isolating logic and functionality from the user interface.
My advice is to become acquainted with the concept of headless components and see if it can be used to your project's use case.
If you like what you read, consider connecting with me on LinkedIn
In case you want to get started with primitive components, I recommend this video on YouTube.