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: [
'../src/runtime/components/**/*.vue',
],
})What am I doing wrong or what else do I have to do?
I recommend you to directly, in your module, to use the hook to extend the tailwind config: https://tailwindcss.nuxtjs.org/tailwind/config#tailwindcssconfig-hook
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.
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) {
tailwindConfig.content.push(resolve('./runtime/**/*.vue')
})
}
})| 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 |
|---|