Including Custom Styles

Once you have defined some base or utility styles, you might want to make use of your custom classes inside other custom CSS files.

For this to work you must import the corresponding entry using the @import directive.

Since each CSS file in compiled independently, using this custom class will fail:

src
└─ styles
   ├─ components
   │  └─ button
   │     └─ button.css
   └─ utilities
      └─ filter
         └─ filter.css

/* filter.css */
.filter-hue-rotate {
  filter: hue-rotate(90deg);
}

/* button.css */
.button {
  @apply filter-hue-rotate;
}

You will get following error:

 ERR_CSS_SYNTAX  The `filter-hue-rotate` class does not exist. If `filter-hue-rotate` is a custom class, make sure it is defined within a `@layer` directive. at undefined:2:3

  1 | .button {
> 2 |   @apply filter-hue-rotate;
    |   ^
  3 | }
  4 | 

You can fix the error by explicitely importing the entry that defines you custom class:

/* button.css */
@import "utilities/filter";

.button {
  @apply filter-hue-rotate;
}

TIP

The general syntax for imports is "<layer>/<entry>".
In the above example the layer is utilities and the entry fitler.