Tailwind: How to make @apply work for custom CSS class?

Question

Say you have a basic project setup:

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

And you want to add a basic utility that uses CSS that's not part of tailwinds default library:

@layer utilities {
  .will-change-transform {
    will-change: transform;
  }
}

or

@layer utilities {
  .ease {
    transition: ease;
  }
}

and you want to be able to @apply it to a custom class down the line without receiving an error:

.my-component {
  @apply block hover:scale-110 w-full ease will-change-transform
}

How would you do this?

jspn · Accepted Answer · 2022-05-09 19:10:40Z

6

I can't say for sure without seeing your environment or the error you were receiving, but the documented way of circumventing these issues is to define your classes in your tailwind config file:

// tailwind.config.cjs
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...

  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.will-change-trans': { // `will-change-transform` is now included in Tailwind CSS 3.0 so using alternative class name for this example
          willChange: 'transform'
        },
        '.ease': {
          transition: 'ease'
        },
      })
    })
  ]

}

then you can @apply these classes anywhere as if they were built in.

(I realize that this issue is probably no longer relevant to you, but I found it while searching so this is for anyone else stumbles upon this question!)

answered May 9, 2022 at 19:10

jspn

611 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin Over a year ago

This comment saved me, thanks : ) Sucks that I can't @ apply and have to list every single property of every single utility class inside the config file... Think I'll just stick with inlining the utility classes and not using @ apply on them... (stackoverflow is dumb and won't let me comment unless I put a space after the @ sign)

Gabor Garami Feb 15 at 23:03

@Justin FYI If you put a backtick around it I think it recognizes @apply as a piece of code, so it does not try to search an user with name 'apply'.

Muhammad Reda · Accepted Answer · 2023-05-11 14:35:34Z

3

You can create your custom classes inside css and css preprocessors.

I prefer that over defining the custom classes inside tailwind.config file, for better file structure and readability.

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

@layer components {
  .will-change-transform {
    will-change: transform;
  }

  .ease {
    transition: ease;
  }
}

/* then... */
.style-this-div {
  @apply will-change-transform ease;
}

answered May 11, 2023 at 14:35

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

Comments

Vishal · Accepted Answer · 2023-01-15 11:59:08Z

1

This can be achieved using postcss extend package. Prerequisite is tailwind is installed using postcss.

Instead of @apply, one can use @extend to add styles from the custom classes. So the class definition will become something like this -

.my-component {
  @apply block hover:scale-110 w-full;
  @extend .ease;
  @extend .will-change-transform;
}

answered Jan 15, 2023 at 11:59

Vishal

493 bronze badges

Comments

Luis Lobo · Accepted Answer · 2024-05-31 18:14:43Z

0

Following Muhammad Reda logic, I made the minimum version with an example for a React component

// tailwind-custom-styles.scss
@tailwind components;

@layer components {
    .will-change-transform {
        will-change: transform;
    }
    .ease {
        transition: ease;
    }
}

Use in your component

// Component.scss
@import "../scss/tailwind-custom-styles.scss";

#Component {
    @apply will-change-transform ease;
}

Then

// output
#Component { // alphabetical order?
    transition: ease;
    will-change: transform;
}

Using CSS and @layer https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

edited May 31, 2024 at 18:14

answered May 31, 2024 at 18:08

Luis Lobo

9097 silver badges11 bronze badges

Collectives™ on Stack Overflow

Tailwind: How to make @apply work for custom CSS class?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related