Can't apply certain existing Tailwind classes to custom selectors in CSS files

30 Views Asked by At

I have a fairly complex React grid component with editable cells for which I've defined its own utility classes such as e-grid-row and e-grid-cell. I then apply styles to these utility classes in a separate CSS file, let's say that it's called eGrid.css. However, I use Tailwind utility classes instead of plain CSS to apply these styles. I use Tailwind's @apply PostCSS rule to do so. For example:

.e-grid-row {
   @apply bg-gray-100 border border-gray-800;
}

.e-grid-cell {
   @apply flex min-h-5;
}

The problem I've encountered is that for some reason, the min-h-5 class isn't getting picked up by Tailwind. I get the following error:

Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
SyntaxError
...
The `min-h-5` class does not exist. If `min-h-5` is a custom class, make sure it is defined within a `@layer` directive.

I checked Tailwind's docs and this class does indeed exist.

I have tried to re-compile tailwind using npx tailwind -c .... I have tried to delete the node_modules folder and re-install the node modules. I've made sure that the CSS file-type in the given directory is defined in the tailwind.config.js under the content config option. I have also tried to apply the min-h-5 class directly in the JSX of another component, hoping that Tailwind might pick up the class and include it in its compilation. But none of these were successful. Something else to note is that it seems to work on one computer, but not on another. Seems to be something regarding cache and Tailwind's compilation.

Is there something I am missing? Thank you.

0

There are 0 best solutions below