3 ms·
Am I really the only person in the world who combines SCSS with Tailwind, so I can nest classes, declare utility classes, and use @apply in those classes? What
by yawnxyz 3y ago
Am I really the only person in the world who combines SCSS with Tailwind, so I can nest classes, declare utility classes, and use @apply in those classes?
What I mean is something like this:
.Card {
@apply p-2 bg-gray-100;
&.--red {
@apply bg-red-200;
}
}
Now, the docs (and the founder) are vehemently against implementing Tailwindcss like this, but it makes the code really readable and reusable. Adding "@apply ___" in my SCSS is much more compact than writing out full CSS, and I think much more readable. Plus, I get to apply whatever CSS that are out of scope of Tailwind. Win win.
- paradox460 3y agoYou might be interested in OpenProps then: https://open-props.style https://open-props.style Basically its tailwind without all the classes, and without apply, in pure CSS variables
- vehemenz 3y agoSCSS can be a nice timesaver, but it's generally not needed and adds complexity. Avoiding complexity is often the point of using Tailwind in the first place.
- yawnxyz 3y agoI have a bunch of projects (micro sites) that all use the same style, so I just import all my utility classes, so .Card looks the same across projects. Using SCSS and nesting helps me keep things like colors and other "attributes" organized across projects. The problem I'm solving for is NOT having to find/replace every tailwind-spam across several projects/components/frameworks if I want to add a new "color" property to a .Card, or change the padding, or whatever. I just change the source utility, then link to the file (with Git / package.json linking), so the one change can be applied across projects. If I followed what the founder and docs said, I'd have to spend every waking hour find/replacing text across all my projects.
- vehemenz 3y agoI'd say you're doing things correctly then. In my experience, site/application-wide refactoring or restyling is much less common than adding or fixing components. You can't really optimize for both.
- oo0shiny 3y agoOut of curiosity, why are the docs/founder vehemently against this implementation? Seems pretty concise to me.
- ehutch79 3y agoThe tailwind developers have specifically said @apply is a codesmell and they regret adding it. If you're just going to stick the tail wind classes in a class like this, why bother? just use css vars.
- yawnxyz 3y agoI think CSS vars are complementary (I also use them in projects). There's probably a way to do this more elegantly, but with tailwind classes in a class I can quickly re-apply certain styles across projects / microsites.
- ehutch79 3y agoYou don't need tailwind for that? that's how css works.