Tailwind is a Library, not a language.
Makes sense not to include it.

I also want to be able to butcher another language I can’t write.

https://github.com/reactwg/react-18/discussions/110

“Our preferred solution is to use for statically extracted styles and plain inline styles for dynamic values. E.g. <div style={{...}}>.

You could however build a CSS-in-JS library that extracts static rules into external files using a compiler. That’s what we use at Facebook.

It’s tempting to use dynamically generated style sheets since it contains only the rules that are active on the page right now. However, this comes at a cost. Usually at the expense of runtime cost. It also comes at a cost of inserting new rules frequently which invalidates a lot of the work that has already been done.

Shared stylesheets are efficient to parse and are very cacheable. By extracting them into shared styles you are also effectively batching a lot of that work up front. This lets you avoid doing that work later on as the user starts interacting with the page.

Hi,
Thanks for the tips
Yes, I should have explained further in detail abut the first 2 points you mentioned
As for the styled components, my apologies, it was a mistake and it is corrected
thanks

Importing CSS or CSS modules is not a feature of React, and will only work if you’re either using a framework that is configured to support it, or have set it up yourself.
This point is important.
In fact React is neither a Programming language, nor a framework. It’s just a JavaScript library to help with rendering live (HTML) UIs. React is but a tiny cog in the gearwork and the styling options are another, separate cog.
The CSS modules example exports .font but the JSX code uses .heading. This is confusing for anyone lacking prior knowledge of how CSS modules behave.
Styled components should never be defined/constructed inside another component’s render function. (In fact no components should be.) This will cause poor performance and very unpredictable rendering behavior.