I'm facing this problem of tailwind file with @layer base, components, utilities from a node_module not injected into the bundle file built by webpack. Being a beginner in terms of Tailwind CSS, it's very hard to investigate..
My setup Firstly I have an entry css file that import a node_module css file.
@import '@some_npm_modules/**/tailwind.css';
/* no tailwind layer definition */
In this node_module tailwind.css, I have some definition like
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
...
}
@layer components {
...
}
@layer utilities {
...
}
After a webpack build, I can still see these codes in my bundle css - which I believe the tailwind injection failed.
@tailwind base;
@tailwind components;
@tailwind utilities;
...
my attempts to fix:
- I tried to added the node_modules paths in tailwind.config.js content, the bundle file changes a littie but the @tailwind base is still there...
- I did add the node_modules path in my webpack css loader like
{
test: /\.css$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/@xxxxx'),
],
}
I really want to see that @tailwind base... was gone in bundle css and I can see things like .text-[20px] in there
I'm very much a beginner to tailwind. Please let me know if I have missed anything(highly possible).. Really appreciate it!