How do you deal with one of those values needing to change? With SASS or css-in-js you can define a variable and then update it everywhere at once by changing a single line. This seems to be the biggest thing you give up with Tailwind.
How do you deal with one of those values needing to change? With SASS or css-in-js you can define a variable and then update it everywhere at once by changing a single line. This seems to be the biggest thing you give up with Tailwind.
The 'update everywhere' was the biggest hurdle for me, particularly with 'design on the fly' quick pieces. But as per the Tailwind docs, generally you're building reusable parts in Vue or whatever, and you change there. There's a page on it here: https://tailwindcss.com/docs/reusing-styles - which I appreciate is still a bit of a 'really?!' kinda thing if you're used to normal CSS.
But to quote The Office... Different drinks for different needs.
However, I've found such a thing mostly unnecessary. Even with Tailwind I have some abstractions at the component layer so that I don't need to change values all over the place when I want my buttons to have more padding. I'd just change `px-2` to `px-4` in that one place where I define my button styles, for example.
If you need to change values dynamically with JavaScript such as you can with CSS-in-JS, I'd typically use CSS variables.
Now of course this isn't as powerful a system as SASS variables, but it's good enough. That is to say, I have gripes with Tailwind still, but dealing with variables isn't one of them.