[v4] Cannot apply unknown utility class

[ev3rlost]

I have a seperate utilities.css file containing @import from other subfolders ('form/buttons.css', 'form/inputs.css', etc).

I keep getting this error:

[plugin:vite:css] [postcss] Cannot apply unknown utility class: flex-center

app.css

@import "tailwindcss";

@import 'fonts.css' layer(base);
@import 'base.css' layer(base);
@import 'utilities.css' layer(utilities);
@import 'components.css' layer(components);

@theme {
    --font-family-roboto: "Roboto", "sans-serif";
    --color-primary-50: #f5f3ff;
    --color-primary-100: #ede9fe;
    --color-primary-200: #ddd6fe;
    --color-primary-300: #c4b5fd;
    --color-primary-400: #a78bfa;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #7c3aed;
    --color-primary-700: #6d28d9;
    --color-primary-800: #5b21b6;
    --color-primary-900: #4c1d95;
    --color-primary-950: #2e1065;
}

utilities.css

.flex-start { @apply flex justify-start items-center; }
.flex-center { @apply flex justify-center items-center; }
.flex-between { @apply flex justify-between items-center; }
.flex-end { @apply flex justify-end items-center; }

components.css

@import "form/buttons.css";
@import "form/inputs.css";
@import "form/radios.css";
@import "form/checkboxes.css";
@import "form/textareas.css";
@import "form/wysiwyg.css";

Components usualy use my custom utility classes for example flex-start

The CSS folder structure:

/css
   /form
      buttons.css
      inputs.css
      radios.css
      checkboxes.css
      textareas.css
      wysiwyg.css
   app.css
   base.css
   components.css
   fonts.css
   utilities.css

What am I missing?

[ev3rlost]

Bump! Anyone got any ideas what's causing the error?

[adamwathan]

Sounds like you're trying to do @apply flex-center somewhere — v4 doesn't currently support applying custom classes, only classes that are built in to the framework, so this just won't work quite yet. Will be in there eventually though before the real v4 release 👍

[ev3rlost]

Thank you Adam for clarifying! The hype is unreal! Can't wait for v4! :)

[bdrtsky]

Still not there. Just had this issue.

[mhenrixon]

How far away is this apply functionality, ya think @adamwathan? I am considering whether or not to start upgrading, and this would be inconvenient.

I love v4 so far btw, I am blown away by the speed and the new way of working.

[adamwathan]

As long as your custom utilities are registered as utilities using @utility it works today 👍🏻