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
b1mind2mo 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
patwasalinguist2mo 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
b1mind2mo ago
You should look into Sass (or less/stylus/etc) if that is what you are after.
b1mind
b1mind2mo ago
Beyond CSS
Take control of your stylesheets with modern CSS and tools like Sass and PostCSS
patwasalinguist
patwasalinguist2mo 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
b1mind2mo ago
Ya and @mixins are being preposed for CSS. So someday as well as like better interation/loops.
patwasalinguist
patwasalinguist2mo ago
do you know if i could see a proposal for mixins? is it on github somewhere?
b1mind
b1mind2mo 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
ἔρως
ἔρως2mo 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
patwasalinguist2mo ago
Whoa that’s crazy
ἔρως
ἔρως2mo ago
it is stupidly useful
patwasalinguist
patwasalinguist2mo ago
So $arg1 would be a variable in .any.css
ἔρως
ἔρως2mo ago
no, it's an argument passed to the mixin
patwasalinguist
patwasalinguist2mo ago
Hmm
ἔρως
ἔρως2mo ago
imagine something like this:
@mixin xyz($name) {
[data-cookie="#{$name}"] {
@contents
}
}
@mixin xyz($name) {
[data-cookie="#{$name}"] {
@contents
}
}
patwasalinguist
I should probably understand this, sorry, but where how does $name get its value?
ἔρως
ἔρως5w ago
it's a parameter mixins work as functions that generate css