How to bundle tailwind css inside a Vue Component Package

Question

In one of my projects, I build a nice vue3 component that could be useful to several other projects. So I decided to publish it as an NPM package and share it with everyone.

I wrote the isolate component, build it and publish BUT I use Tailwind css to make the style. When I publish and install the component everything is working BUT without the beauty of the css part.

I tried several configurations and alternative tools to generate the package that automatically add the tailwind as an inner dependency to my package.

Does someone have experience with this? how can build/bundle my component by adding the tailwind CSS instructions into it?

Answer 1

You're almost there

Since you've got your component working, the majority of the part has been done.

For configuring the styling of the component you need to identify the Tailwind CSS classes being used by your Vue component package and retain them in the final CSS that is generated by the Tailwind engine in your project.

Follow below steps in the project where you want to use your tailwind vue component package.

For Tailwind CSS V3

// tailwind.config.js
module.exports = [
    //...
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
        "./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}"    // Add this line
        // Replace "package-name" with the name of the dependency package
    ],
    //...
]

For Tailwind CSS V2

// tailwind.config.js
module.exports = [
    //...
    purge: {
        //...
        content: [
            "./index.html",
            "./src/**/*.{vue,js,ts,jsx,tsx}",
            "./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}"    // Add this line
            // Replace "package-name" with the name of the dependency package
        ],
        //...
    //...
    }
]

The content property in the tailwind.config.js file defines file path pattern that the tailwind engine should look into, for generating the final CSS file.

For Pro users

You may also try to automate the above setup by writing an install script for your npm package to add this configuration to the tailwind.config.js file

References

Tailwind Docs - 3rd party integration

Answer 2

It's a bit difficult for someone to answer your question as you've not really shared the source code, but thankfully (and a bit incorrectly), you've published the src directory to npm.

The core issue here is that when you're building a component library, you are running npm run build:npm which translates to vue-cli-service build --target lib --name getjvNumPad src/index.js.

The index.js reads as follows:

import component from './components/numeric-pad.vue'

// Declare install function executed by Vue.use()
export function install (Vue) {
  if (install.installed) return
  install.installed = true
  Vue.component('getjv-num-pad', component)
}

// Create module definition for Vue.use()
const plugin = {
  install
}

// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue
}
if (GlobalVue) {
  GlobalVue.use(plugin)
}

// To allow use as module (npm/webpack/etc.) export component
export default component

There is no mention of importing any CSS, hence no CSS included in the built version.

The simplest solution would be to include the index.css import in your index.js or the src/components/numeric-pad.vue file under the <style> section.

Lastly, I'm a bit rusty on how components are built, but you might find that Vue outputs the CSS as a separate file. In that case, you would also need to update your package.json to include an exports field.