I've been using CSS-in-JS libraries (styled components/emotion/Theme-UI) and started learning Tailwind (TW hereafter) only last week.
So far, it seems like it'd be a great fit for "component" level styling.
How are site-wide styling handled with TW? Does it make sense to write the whole site with TW? Or should we leave the global styling to CSS/SASS?
Once you configure Tailwind for the basic defaults and you use a component-based framework like React, almost nothing is "global".
You may have a Header component, a Button component, a TextInput component... what's global? 😊
Thank you, Matteo. So long as each component is responsive, then it's a matter of composing each component :)
The short answer is you can mix and match, and then with purgecss, clean put your unused classes before putting a project into production. TW is atomic: classes do not need or expect other classes, unlike say bootstrap.
The longer answer is you can handle setting site-wide styling with @apply - see this video.
Thank you, Bob.
That @apply is a nice directive to apply a global style~
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.