@utility not available

[severinlandolt]

Hi all,

I use tailwindcss@4.0.6 and I created a @utility. I want to use it in my tooltip.tsx. However, using this class does not work (not being generated). Project structure:

.
├── package.json
├── src
│  ├── components
│  │  ├── tooltip
│  │  │  └── tooltip.tsx
│  ├── config
│  │  └── postcss.config.mjs
│  └── styles
│      ├── tailwind-preflight.css
│      ├── tailwind.css
└── tsconfig.json

My tailwind.css file:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import './tailwind-preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);

:root {
  --ds-black: oklch(0 0 0);
/* ... */
}


@theme inline {
  --color-*: initial;
  --radius-*: initial;

  --animation-delay-100: 100ms;
  --animation-delay-200: 200ms;
  --animation-delay-300: 300ms;
  --animation-delay-500: 500ms;
  --animation-delay-700: 700ms;
  --animation-delay-1000: 1000ms;
}

@utility animation-delay-* {
  animation-delay: --value(--animation-delay-*);
  animation-delay: calc(--value(integer) * 1ms);
  animation-delay: --value([*]);
}

I already tried adding @source "../../src"; to make sure the tooltip.tsx get's scanned. No luck with that. All other utilities work and are suggested by intellisense, except for my @utility.

For example, this setup works here: https://play.tailwindcss.com/FuLm3ROrbW

[wongjn]

Please consider providing a git repository that reproduces the unexpected behavior.

[severinlandolt]

Auto resolved: Was tied to this: tailwindlabs/tailwindcss-intellisense#1054 (comment)