What Is @Apply in CSS

What is @apply in CSS?

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;
  };
}
  
h1 {
  @apply --header-theme;
}

h2 {
  @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 explain with this example

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}
  
h1 {
  @apply --header-theme;
}

h2 {
  --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, you can use it for far more, you can read more about mixin and variables in SASS for other ways of using it, after I suggest you read this blog post

now after I got you excited, time for the bad news, it is not implemented in browsers yet chrome, it is still worth knowing that it is coming and maybe if you want to prepare yourself start with SASS

Need help using @apply directive in Tailwind CSS

This error keeps showing because you added the btn class inside itself in your CSS file

your HTML should be like this:

<a class="btn" href="">Browse</a>

<a>Look</a>

and your CSS should be like this:

@tailwind base;
@tailwind components;
.btn{
@apply bg-transparent border  border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;
}
@tailwind utilities;

also, it's a better practice to add your components with @layer components so you can add new components classes wherever you want and not only between @tailwind components; and @tailwind utilities;

Better practice

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
  .btn{
      @apply bg-transparent border  border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;
    }
}

see the example on tailwind PLAY

How to use @apply in a react component with css modules

You've got to import the global stylesheet into the local one. Because postcss-apply has no way to know about that global file while parsing the local one. So it's a good idea to have a partial with only custom properties and custom property sets declarations.

You probably want something like postcss-import

@import 'path/to/variables.css';

.rightnav {
  @apply --font;
  float: right;
  color: white;
}

Apply CSS Style to child elements

This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements.

It is not the same as "all td, th and caption elements which are contained by a div element with a class of test". To accomplish that you need to change your selectors:

'>' isn't fully supported by some older browsers (I'm looking at you, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

duplicate Unknown at rule @apply css(unknownAtRules) errors in Vue.js project

1- First Install VS Code plugin stylelint

2- Then disable css and scss validation for the project. (ctrl+shift+p) and search "settings json".

"scss.validate": false
"css.validate": false

3- Create stylelint plugin config file in your project root stylelint.config.js

4- Add the following content to it in order to ignore at rules apply, tailwind,etc:

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}

---

Related Topics