How to use tailwindcss in a custom Nuxt3 module?

Question

I am building a custom Nuxt3 module and want to use tailwindcss to style my components.

However, I am having trouble setting up tailwindcss for my module.

I tried to set it up, like I would with a normal css file:

In the 'src/' folder I have the follwing components:

'runtime/css/tailwind.css':

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

'runtime/tailwind.config.js':

 import defaultTheme  from ("tailwindcss/defaultTheme")

module.exports = {
  content: {
    files: [
      "./components/**/*.{vue,js}",
      "./layouts/**/*.vue",
      "./pages/**/*.vue",
      "./plugins/**/*.{js,ts}",
      "./modules/**/*.{js,ts,vue}"
    ],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  }
};

'module.ts':

import { resolve } from 'path'
import { fileURLToPath } from 'url'
import { defineNuxtModule, addPlugin, addComponent } from '@nuxt/kit'

export interface ModuleOptions {
  css: boolean
}

export default defineNuxtModule({
  meta: {
    name: '@nuxt-module/polkadotjs-wallet',
    configKey: 'polkadotjs-wallet'
  },

  defaults: {
    css: true,
  },
  setup (options, nuxt) {
    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
    nuxt.options.build.transpile.push(runtimeDir)

    // add the plugin
    addPlugin(resolve(runtimeDir, 'plugin'))

    // add components
    const componentsDir = resolve(runtimeDir, "components")
    addComponent({
      name: "Hello",
      filePath: resolve(componentsDir, "Hello.vue")
    })

    if(options.css) {
      nuxt.options.css.push(resolve(runtimeDir, "css/tailwind.css"))
    }

  }
})

While this approach works to use normal css styling, I cannot make tailwind work like that. Running it like this does not give me an error, but it also does not enable me to use tailwind.

user_6188759 · Answer

I think I find a way, but I'm just discovering Nuxt 3. Maybe my answer won't be perfect, but as far as I read the documentation and the @nuxtjs/tailwindcss code, that's all I found to work.

move your runtime/css/tailwind.css to runtime/tailwind.css
- I'm not sure this file is really useful, as there is a default one provided by @nuxtjs/tailwindcss (see in your node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css)
update your tailwind.config.js for content property. It's an array of string for me. Actually, your paths are relatives. But in your app, these paths will take the components app and not the one of your module. You need to give absolute paths.

import defaultTheme  from ("tailwindcss/defaultTheme")
import { fileURLToPath } from 'node:url'

const srcDir = fileURLToPath(new URL('../', import.meta.url))

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    srcDir + '/**/*.{js,ts,vue}', // or separate in folders ?
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  }
};

last part, but the most important, you need to update your module.ts. I would write yours like this :

  async setup (options, nuxt) {
    const runtimeDir = fileURLToPath(new URL('../src/runtime', import.meta.url))
    /**
     * Here, you use the installModule to specify that
     * your module USE the @nuxtjs/tailwindcss module.
     * I think this is the way to add the tailwind module 
     * to your playground, or the app that will use your module
     */
    await installModule('@nuxtjs/tailwindcss', {
      /**
       * Here, you specify where your config is.
       * By default, the module have a configPath relative
       * to the current path, ie the playground !
       * (or the app using your module)
       */
      configPath: resolve(runtimeDir, 'tailwind.config'),
    })
    
    // add components
    const componentsDir = resolve(runtimeDir, "components")
    addComponent({
      name: "Hello",
      filePath: resolve(componentsDir, "Hello.vue")
    })

    /**
     * for these lines, I don't know if they are still useful
     * please check them before keeping them :-)
     */
    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
    nuxt.options.build.transpile.push(runtimeDir)

    // add the plugin
    addPlugin(resolve(runtimeDir, 'plugin'))

    if(options.css) {
      nuxt.options.css.push(resolve(runtimeDir, "css/tailwind.css"))
    }
  }

Does this help you ?

References :

How to use tailwindcss in a custom Nuxt3 module?

1 Answers