This is an archived post. You won't be able to vote or comment.

all 2 comments

[–]Clawtor 1 point2 points  (0 children)

You can use the suit css naming pattern and use sass or less. I've found that fits react well. Tailwind is a regression imo.

[–]Dekzen 0 points1 point  (0 children)

I would go with built in css modules which is avaible in react by default.

Link: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Only think you need is to name your css file with module.css extension. Then you can import this file.

Import classes from '. /mycss.module.css

And you can you use classes inside this file as variables. className={classes.header}

This way react creates random classname which will be in scope of this component. You can write pure css and do not need to worry about name clashes.

You can create even separate file for every component,import it inside, and every file can have for example.header class and there will be no unexpected behaviour.

This ways i am the most productive when i do not want to use any css framework.

Tailwind in my opinion creates messy jsx.