feat: Support Tailwind 4 (without @nuxtjs/tailwindcss)

[MickL]

🆒 Your use case

As of right now, there is no@nuxtjs/tailwindcss module for Tailwind 4 because Tailwind now has first class Vite support:

nuxt.config.ts:

vite: {
    plugins: [tailwindcss()],
  },
css: ['~/assets/css/main.css'],

Therefor when using Tailwind 4, the og-image module seems to not load the Tailwind config anymore, which actually doesnt exist, instead only a css file is loaded and used for configuration, e.g.:

assets/css/main.css:

@import "tailwindcss";

@theme {
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Merriweather', sans-serif;
}

But how to tell og-image to load this css file, too?

🆕 The solution you'd like

• New prop in nuxt.config to tell to load a css file (that can contain Tailwind config)
• Update docs

🔍 Alternatives you've considered

No response

ℹ️ Additional info

It seems like currently og-image is even hardcoded using Tailwind 3 because it is using @nuxtjs/tailwindcss, doesnt it? So even tho I have Tailwind 4 installed, og-image is using Tailwind 3?

[silverbackdan]

I have just discovered this limitation as well - my project using Tailwind 4 with the Vite plugin has no crossover with this og-image module. Could we do anything to help in making this a reality?