Comment by mb2100
11 days ago
If everything in your code is a React component, I get why you would just want to write the styles right there.[0] Then again, why write `<Button>` if you could just write `<button>` and style it with standard CSS.
[0]: https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-...
> If everything in your code is a React component, I get why you would just want to write the styles right there.
Even for keeping the style close to the component, you can just use standard css.
Create a folder Button, create two files Button.tsx and Button.css in that folder, import the css file in the tsx file, add a class "button" on the first element the tsx file renders, start all the rules in the css file with ".button " to encapsulate the style.
People will say it's too much work, but it took me like 5 sec.
if you're not using CSS modules, why would you import the css file into your javascript? But anyway, I think we agree. Feel free to read the linked blog post ;-)
Yes we agree, my comment was for tailwind users. :) I was replying to you because you gave the example of a Button component, and it's a good example to demonstrate that you don't need tailwind to style components.
Because button is literally anything clickable. Not everything is a boxed button. You cannot just globally add a style to <buttton> and call it a day. For example, an upvote (^) button, a close (x) button, etc. A lot of clickable elements aren’t inside a [click me] box
button, .button { /* my button styles */ }
What if you need 3 levels of html tags?