@headlessui/tailwindcss PostCSS warning on Nuxt3

[sandros94]

What package within Headless UI are you using?

@headlessui/tailwindcss

What version of that package are you using?

For example: v0.1.1

What browser are you using?

Chrome, Edge, Safari, Firefox

Reproduction - fresh nuxt3 init with:

package.json

{
    "private": true,
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "devDependencies": {
        "@nuxtjs/tailwindcss": "^6.1.3",
        "nuxt": "3.0.0",
        "nuxt-headlessui": "^1.0.4",
        "@headlessui/tailwindcss": "^0.1.1"
    },
    "dependencies": {
    }
}

nuxt.conf.ts

export default({
    modules: ['@nuxtjs/tailwindcss','nuxt-headlessui',],
    typescript: {
        shim: false
    },
    css: [
        '@/assets/css/main.css',
    ],
    tailwindcss: {
        // Options
    },
    headlessui: {
        prefix: ''
    },
});

tailwind.conf.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@headlessui/tailwindcss'),
  ],
}

Describe your issue

Running npm i and npm run dev will show in the terminal a PostCSS warning:

WARN                                                                                                                     02:49:02
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.

Additional notes I'm using @nuxtjs/tailwindcss and nuxt-headlessui to simplify some nuxt feature like autoimports.

I'm fairly new to nuxt and jamstacks in general, but happy to learn and test stuff.

[thecrypticace]

@Sandros94 I set up a fresh Nuxt 3 app with what I believe is a usable setup but I'm not seeing any PostCSS warnings (nor would I expect to because Tailwind CSS does set the result.from option appropriately). Could you provide a reproduction?

[sandros94]

Strangely I'm unable to reproduce this outside of the two projects I've noticed it. Even more strangely, on the second project, I've noticed that I had daisyui too, and if I remove either daisyui or @headlessui/tailwindcss the PostCSS warning stop showing up.

Since my nuxt 3 templates are going to be based on the second project and I'm in the process of removing daisyui I'll probably just don't look in to this much further. At least up untill when I can reproduce it consistently.