Builder of FreelancerCashFlow; Fullstack Developer, HubSpot Expert & Content Manager. Code in Rails/js/Vue with a little serverless thrown into the mix. Love JAMStack.
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.
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? 😊
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?
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
@applyis a nice directive to apply a global style~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 :)