tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

PostCSS warning for custom utility used with before:/after:

Open gynekolog opened this issue 3 weeks ago • 1 comments

What version of Tailwind CSS are you using?

3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

Vite

What version of Node.js are you using?

v21.7.3

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/vitest-dev-vitest-cp1r2y

Describe your issue

There's a PostCSS warning in the console:

A PostCSS plugin did not pass the `from` option to `postcss.parse`. This may cause imported assets to be incorrectly transformed. If you've recently added a PostCSS plugin that raised this warning, please contact the package author to fix the issue.

It starts when you define your own CSS utility and use it with the before: or after:. Example:

css file:

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

@layer utilities {
  .bg-own {
    background-color: red;
  }
}

Usage:

<div class="before:bg-own" />

gynekolog avatar Apr 26 '24 11:04 gynekolog