tailwind @layer base not bundled by webpack with node_modules

23 Views Asked by At

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:

  1. 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...
  2. 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!

0

There are 0 best solutions below