Tailwind CSS and the death of web craftsmanship

Re:Tailwind CSS and the death of web craftsmanship by yawnxyz on Wednesday August 02, 2023 @03:12PM (#36975628)

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.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by ehutch79 on Wednesday August 02, 2023 @03:15PM (#36975678)

The 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.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by yawnxyz on Wednesday August 02, 2023 @03:22PM (#36975794)

I 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.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by ehutch79 on Wednesday August 02, 2023 @03:25PM (#36975840)

You don't need tailwind for that? that's how css works.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by paradox460 on Wednesday August 02, 2023 @03:14PM (#36975662)

You might be interested in OpenProps then: https://open-props.style

Basically its tailwind without all the classes, and without apply, in pure CSS variables

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by vehemenz on Wednesday August 02, 2023 @03:14PM (#36975664)

SCSS 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.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by yawnxyz on Wednesday August 02, 2023 @03:21PM (#36975766)

I 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.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by vehemenz on Wednesday August 02, 2023 @03:24PM (#36975824)

I'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.

[ Parent | on HN ]

Re:Tailwind CSS and the death of web craftsmanship by oo0shiny on Wednesday August 02, 2023 @03:15PM (#36975674)

Out of curiosity, why are the docs/founder vehemently against this implementation? Seems pretty concise to me.

[ Parent | on HN ]