Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm curious what the CSS directive @apply does. I have googled @apply but I couldn't find anything that could explain its meaning properly for me.

What is the usage of such a directive?

The simple way of explaining it would be; introducing variables into CSS (which is a feature of preprocessors, such as Sass ), and mixins which are function like behaviors (also in preprocessors).

Imagine that --header-theme is a function (mixin):

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  @apply --header-theme;
  @apply --header-theme;
This way, you can use it in many different places without having to rewrite it again (DRY).
Now the variable part could be explained with this example:
:root {
  --brand-color: red; /* Default value */
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  @apply --header-theme;
  --brand-color: green;
  @apply --header-theme;
The mixin will have a variable sent to it and change the color.
This is not the limits of the feature, and you can use it for far more. You can read more about mixin and variables in Sass for other ways of using it, and after I suggest you read this blog post.
Now after I got you excited, it is time for the bad news. It is not implemented in browsers yet (Chrome), but it is still worth knowing that it is coming and maybe if you want to prepare yourself start with Sass.
                does the var function serve the same purpose in SASS as in javascript? Sorry, I don't know any SASS.
– GameCoder
                Dec 9, 2016 at 20:28
                the variable is somehow the same control all from one location instead of rewriting, the function is a little bit different, but it serve the same general idea, what I am trying to say; for now you won't be able to use it anyway; so if you feel curious about the feature check sass (ruby) or less (node.js), that where they came up with the idea
– oqx
                Dec 9, 2016 at 21:26
                The spec author's blog post titled "Why I Abandoned @apply" suggests that this feature will NOT be making its way into future browsers.  Spec as I found it - tabatkins.github.io/specs/css-apply-rule/#intro Retraction over at - xanthir.com/b4o00
– user1645942
                Oct 6, 2017 at 13:13
                This was a very brief but detailed explanation. Thank you for such a useful answer! I am coming from a SASs background but starting to use tailwind css for the first time.
– Radmation
                Apr 27, 2022 at 14:49
@apply is from a proposal that has since been abandoned, and replaced with CSS Shadow Parts.
the @apply rule, which allows an author to store a set of properties
in a named variable, then reference them in other style rules.
                Unfortunate... CSS Shadow Parts serves a completely different utility: it allows to work with native shadow DOM in a similar way as to normal DOM. While the @apply was just some shorthand for a set of styles, helping us to write DRY code without using post-processors.
– Jerry Green
                Mar 1, 2022 at 7:06
                @Qasim The tailwind pre-processor. "Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects."
– Joey Carlisle
                Feb 15, 2022 at 19:02
@apply is pretty cool. It basically allows you to reuse CSS blocks without having to copy them around and without having to modify their selectors.
It will make it easier to use CSS frameworks and keep semantic class names at the same time.
I found this article to be a nice instruction to this feature.
Unfortunately, at the moment, browser support is basically non-existent. It can be used with a CSS pre-processor such as PostCSS.
It's future is also uncertain, if I understand well. The main advocate behind this feature stopped supporting it.
                ikr! I love the way I can use these classes from Tailwind CSS in @apply. That introduces exceptionally new way of working with stylesheet that leaves you with reusable bricks, which are also easily categorized - you can actually sort them (you can use reference for this like me from ToC of Tailwind CSS documentation) and not properties anymore to scan stylesheets efficiently! There are a lot of possibilities like writing simple pin shothand instead of all top/bottom/left/right: 0.
– vintprox
                Apr 28, 2019 at 13:28
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.