Kevin Powell - Community•3mo ago

Is this how @apply works in tailwind?

I'm not a tailwind person but I recall seeing somewhere that there it has something called @apply, which might be something I have been wishing were possible in css for a long time. Namely, I would like to be able to say:

.primary-heading {
  color:maroon;
  font-family: sans;
  text-shadow: 1px -1px 1px black;
}

.some-heading {
  @apply(.primary-heading);
}

.primary-heading {
  color:maroon;
  font-family: sans;
  text-shadow: 1px -1px 1px black;
}

.some-heading {
  @apply(.primary-heading);
}

Another way to think about this is that i would like to be able to put multiple properties in a css variable, but of course that’s not possible. Does @apply work that way in tailwind?

17 Replies

b1mind•3mo ago

no you use TW classes in it basically at that point you should just make your own util though its bad ig says the creator... was a "gateway for CSS nerds" and mistake From their docs

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}

🤢 😅

Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

patwasalinguist•3mo ago

Huh ok. I don’t get tailwind at all in any case. (I’m fine with CSS.) But I do like the idea of being able to give names to bundles of properties and then reuse those

b1mind•3mo ago

You should look into Sass (or less/stylus/etc) if that is what you are after.

b1mind•3mo ago

https://www.beyondcss.dev/ (plug for Kevin)

Beyond CSS

Take control of your stylesheets with modern CSS and tools like Sass and PostCSS

patwasalinguist•3mo ago

huh okay thanks I wonder if something like that might ever end up in the spec. I guess this @mixin business is similar to what i was thinking about

b1mind•3mo ago

Ya and @mixins are being preposed for CSS. So someday as well as like better interation/loops.

patwasalinguist•3mo ago

do you know if i could see a proposal for mixins? is it on github somewhere?

b1mind•3mo ago

https://github.com/w3c/csswg-drafts/issues/9350 I think this is the right one its Miriam so I assume it is https://css.oddbird.net/sasslike/mixins-functions/ yea it is and been updated

ἔρως•3mo ago

one important thing about scss (sass but actually has the css syntax) is that ANY css file is valid in sass and you can organize everything into individual files that are compiled into a single css file @mixin also lets you use the @contents, which lets you do something like:

@include mixin-name($arg1: "value") {
  .any.scss {
     --goes: "here";
  }
}

@include mixin-name($arg1: "value") {
  .any.scss {
     --goes: "here";
  }
}

the @contents will be replaced with the scss inserted into it

patwasalinguist•3mo ago

Whoa that’s crazy

ἔρως•3mo ago

it is stupidly useful

patwasalinguist•3mo ago

So $arg1 would be a variable in .any.css

ἔρως•3mo ago

no, it's an argument passed to the mixin

patwasalinguist•3mo ago

Hmm

ἔρως•3mo ago

imagine something like this:

@mixin xyz($name) {
  [data-cookie="#{$name}"] {
    @contents
  }
}

@mixin xyz($name) {
  [data-cookie="#{$name}"] {
    @contents
  }
}

patwasalinguist•3mo ago

I should probably understand this, sorry, but where how does $name get its value?

ἔρως•3mo ago

it's a parameter mixins work as functions that generate css

Gaming

Programming

Is this how @apply works in tailwind?