How do I use Tailwind when authoring a Nuxt module?

This issue has been tracked since 2023-03-08.

I am working on several Nuxt based applications that should all share a common set of UI elements and for that, I would like to create a Nuxt module. The UI components should be styled using Tailwind.
Based on the module starter template, I create my components within /src/runtime/components. The starter template comes with a playground in /playground and a test environment in /test. If I add @nuxtjs/tailwindcss to /playground/nuxt.config.ts and create a /playground/tailwind.config.ts, it seems that I cannot break out of /playground or at least I didn't find a way to configure Tailwind to look for content inside /src/runtime/components as I always get the error

No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.

even though I have

import type { Config } from 'tailwindcss'

export default (): Config => ({
  content: [

What am I doing wrong or what else do I have to do?

Atinux wrote this answer on 2023-03-13

I recommend you to directly, in your module, to use the hook to extend the tailwind config:

smares wrote this answer on 2023-03-13

The thing is, I don't use Tailwind directly in the module itself. I "decorate" the various HTML nodes with Tailwind utility classes, but it's the application's (the one using the module) job to include Tailwind and extend the content to node_modules/nuxt-myfancymodule/**/.vue. Using this approach, the application has all the influence on the effective style. Maybe it's the wrong approach, I don't know. 😅

And within the module repository, I see the playground as the application that uses my module, so I thought I include Tailwind in the playground, but don't know how to tell Tailwind to look for content in ../src/runtime/**/*.vue.

Atinux wrote this answer on 2023-03-13

Same here, you can use a Nuxt hook in your module even if the module does not install Tailwind itself @smares

import { createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)

     nuxt.hook('tailwindcss:config', function (tailwindConfig) {
smares wrote this answer on 2023-03-13

Just wanted to write that it still doesn't work, but I am so dumb... I was loading the Tailwind module before my own module, so of course it didn't work.

Thanks so much @Atinux!

More Details About Repo
Owner Name nuxt-modules
Repo Name tailwindcss
Full Name nuxt-modules/tailwindcss
Language TypeScript
Created Date 2019-04-04
Updated Date 2023-03-29
Star Count 1285
Watcher Count 12
Fork Count 157
Issue Count 57


Issue Title Created Date Updated Date