<span style=“color: var(--text-gray-700)”>Gray text</span>
Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger:
<div class="px-2 sm:px-8">
I disagree with your preference; all the classnames are not easily parseable and obscure the markup, and I much prefer the CSS media query syntax. But that’s, like, just my opinion, man. If you like it better, don’t let me stop you!
How?
<style>@media (min-width: 100px) {}</style>https://tailwindcss.com/docs/customizing-colors#color-object...
Utility CSS is by far my favorite way to write CSS, especially in teams. It allows you to extract out multiple classnames that encapsulate all styles into a single classname.
Why would you use Sass when plain CSS does the job better? Tailwind is just normal CSS, all the build steps are ways of making your stylesheets more efficient and removing dead code but it's all still CSS no preprocessor necessary.
It's a design system as well as a set of utility classes. Consider the difference between
<span style="color: #cccccc">Gray text</span> and <span class="text-gray-700">Gray text</span>
In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.