HN Explorer

Show HN: Stylemapper – A better way to style React components (slicknode.com)

6 points by ivome ↗ HN
I have never been 100% happy with the way React applications were styled, and I tried lots of options. Recently I started using TailwindCSS, which is great, but there were still a few things I didn't like: - It's ugly with CSS classnames all over your component code - There is lots of boilerplate for custom components, especially if you are using Typescript and variants So I wrote a little utility that takes care of all the reservations I had. I would love to hear your feedback!

4 comments

[ 3.7 ms ] story [ 19.1 ms ] thread
catchmeifyoucan
This looks great! Will def. use it in my next project. What I liked the most is the introduction of the variants.Pretty big Tailwind user and this is one of the areas where it becomes a little frustrating. I think it's also easy to forget or miss classes in tailwind since I often end up copy-pasting a lot.
dairylee
> while others make it more difficult to use native CSS features

How do you use native css features with Stylemapper if it's just for utility classes?

> Zero dependencies

Except for a utility css framework...

ivome
> How do you use native css features with Stylemapper if it's just for utility classes?

The applied classes don't have to be utility classes. You can use it with any other CSS solution like CSS modules, global stylesheets, passing inline styles via the styles prop, etc.

> Except for a utility css framework...

This is not a requirement. This works the same with other custom styling solutions, like CSS modules, SASS, SCSS, etc.

bot41
I really dislike TailwindCSS but everyone else seems to love it. I'll have to give it another shot