Can't get tailwind styling to work on a package I have built once imported into my next app
Answered
adam.birds posted this in #help-forum

Has anyone here done much playing with tailwind css version 4, as I'm finding it hard to get the help from their official discord?
I've created a table package to use with nextjs using tailwind, but for some reason after installing and using it, none of the tailwind styles are actually working on the table despite seeing all the classes in dev tools. Any ideas why this would happen. Package is https://github.com/adambirds/tablewind
Does the package itself need to ship with its tailwind config or something?
I have tried adding the following to my src/app/globals.css but still the same:
I've tried all of the following:
But nothing ever works. If I copy my package code into my project and just import as if its any other component, it works fine, but obviously i don't want to do that as the whole point was a reusable library i could maintain centrally and use in all my projects.
I have definitely confirmed its an issue with tailwind detecting the styles, because as soon as a i bring a copy of the app back inside my project, even still calling the package itself, it works because the css is used in the other code. But for some reason none of these source commands are actually working, even after a full restart of the dev server.
I've created a table package to use with nextjs using tailwind, but for some reason after installing and using it, none of the tailwind styles are actually working on the table despite seeing all the classes in dev tools. Any ideas why this would happen. Package is https://github.com/adambirds/tablewind
Does the package itself need to ship with its tailwind config or something?
I have tried adding the following to my src/app/globals.css but still the same:
@import 'tailwindcss';
@source "../../node_modules/tablewind";
I've tried all of the following:
@source "../../node_modules/tablewind";
@source "../../node_modules/tablewind/*";
@source "../../node_modules";
@source "../../node_modules/tablewind/";
@source "../../node_modules/tablewind/next"; /* tablewind/next is the actual import in the code */
@source "../../node_modules/tablewind/dist";
But nothing ever works. If I copy my package code into my project and just import as if its any other component, it works fine, but obviously i don't want to do that as the whole point was a reusable library i could maintain centrally and use in all my projects.
I have definitely confirmed its an issue with tailwind detecting the styles, because as soon as a i bring a copy of the app back inside my project, even still calling the package itself, it works because the css is used in the other code. But for some reason none of these source commands are actually working, even after a full restart of the dev server.
1 Reply

There is a bug in tailwind causing this.
Answer