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.
Current paradigm of UI development in React
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.
How Tailwind CSS can be helpful?
You can find multiple articles online on Tailwind CSS merits and demerits, but in the case of creating custom design this library can be a great tool.
- 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 — A new and different paradigm in React UI
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?
Some of the popular headless libraries are - Radix UI, Headless UI, React Aria by Adobe etc.
Conclusion
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.
Top comments (0)