Tailwind CSS + Vuejs Single File Component and Vs Code Integration

duplicate Unknown at rule @apply css(unknownAtRules) errors in Vue.js project

1- First Install VS Code plugin stylelint

2- Then disable css and scss validation for the project. (ctrl+shift+p) and search "settings json".

"scss.validate": false
"css.validate": false

3- Create stylelint plugin config file in your project root stylelint.config.js

4- Add the following content to it in order to ignore at rules apply, tailwind,etc:

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}

How to bundle tailwind css inside a Vue Component Package

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

Where can I find Tailwind css components with js code?

Maybe here: https://tailwindui.com/
It's not free, but affordable. The components are very good and ou support the project with buying it.

---

Related Topics