Tailwindcss
When I started with web development, Bootstrap was the first styling solution I learned. At that time, Bootstrap was undergoing it's notoriously difficult and prolonged transition from version 3 to 4. At that time Bootstrap 3 seemed to rule the websites, mostly thanks to it's grid system before all browsers had fully-implemented the flexbox spec. While I enjoyed the grid system it was the pre-built components and their flexibility that really stood out to me as the advantage of bootstrap.
Of course now we also have a grid system in native CSS which I would argue is even more powerful than the one Bootstrap provides. Bootstrap also had the drawback that to get it’s more sophisticated components to work (for example, accordions) it also required it’s own bespoke JavaScript script that made DOM manipulations. These don’t necessarily play well with modern application-state libraries that want to exclusively handle the DOM like React and Vue. Thus why I needed to move away
Following Bootstrap, I have moved between 3/4 different styling solutions: styled-components, Material UI, and Tailwind. Styled-components was interesting but it had 3 main flaws:
it was exclusive to React
it didn’t integrating nicely with third-party components that swap out classnames like a CSSTransition component does
it had an ugly syntax for individual margin spacing between components in a layout. I don’t want to create a new React component by wrapping another React component just for margin spacing
Obviously, at times this was a greater hinderance than help. Material UI provided those large sophisticated third-party components that improved productivity but it had a drawback of being too large to the point it slowed down hot reloads in create-react-app on an average laptop. It also had an ugly syntax for margin spacing which was built of a CSS solution called JSS which clearly was not being updated in my opinion.
I will admit at this point that I have not tried StyleX but I get the gist. I appreciate what it’s doing but right now I don’t see it providing me a wholly superior experience than Tailwind. Maybe I will change my mind when I give strict-dom a try.
Today I use tailwind classnames along with templates from shadcn/ui, Aceternity UI and Tailwind’s own premium offering: Tailwind UI. This also involves a lot of third-party components from Radix UI which have similar productivity boosts as Material UI has. Margin spacing can be done with single classnames and some StyleX benefits can be achieved with tailwind-merge.