How can i keep npm packages with tailwind.css working #8814
Replies: 4 comments 8 replies
-
I have found the solution👇 my tailwind.config.js look likes below: module.exports = {
purge: {
enable: process.env.NODE_ENV !== 'development',
content: [
'./src/**/*.html',
'./src/**/*.vue',
+ './node_modules/my-component-path/**/*.{vue,js,ts,jsx,tsx}',
],
},
// ...
} |
Beta Was this translation helpful? Give feedback.
-
Having to map my explicit node_modules path seems a bit awkward. Is there a way to use the existing path resolution features that we use with other packages?
|
Beta Was this translation helpful? Give feedback.
-
It looks like the issue you're encountering is due to conflicting Tailwind CSS classes between your private npm package (PackageA) and your ProjectB setup. When importing PackageA into ProjectB, the styles from PackageA's Here are two possible solutions to address this problem: Solution 1: Use Tailwind's
|
Beta Was this translation helpful? Give feedback.
-
Hey, is there a recommended way by now or do I still have to refer to my node_modules folder? Thank you. |
Beta Was this translation helpful? Give feedback.
-
I creat a privite npm package(PackageA) with tailwind. There are some media query classes like
hidden lg:flex
.Then I create another project ProjectB with tailwind, then I import PackageA in this project in
main.ts
.I use
hidden
in ProjectB but nolg:flex
After I build ProjectB, I find
lg:flex
doesn't work. AlsoPackageA/dist/style.css
has been bundled, buthidden
in ProjectB covershidden lg:flex
I can add 'lg:flex' in
tailwind.config.js
to solve this problem, but i think it's not a good solution.I Try to add 'PackageA/dist/style.css' in
purge.content
but it doesn't work.Is there anyway to solve this problem.
Beta Was this translation helpful? Give feedback.
All reactions