A client wanted me to include scroll-snapping, which, in Tailwindcss, is only supported starting with v3. So I updated Tailwindcss from v2 to v3 and now there is not a single Tailwindcss feature that works in the Kirby panel (everything still works just fine on our custom Next.js frontend).
Is Kirby somehow incompatible with Tailwindcss 3? One major difference with this new version is that it always runs in Just-In-Time mode, as opposed to previous versions. Maybe this is why things aren’t working?
Is there perhaps an example project using Kirby and Tailwindcss 3 that I could look at?
I’m also still on "getkirby/cms": "3.5.7.1", do I perhaps need to upgrade to the latest version of Kirby to gain compatibility with Tailwindcss 3?
We are using Tailwindcss in some blocks provided by a custom plugin we made. These blocks are still working fine with Tailwindcss 3 in our custom frontend, but the panel also uses the same blocks to preview the page. This is where things are breaking.
Hard to guess why that is without knowing more about what the custom plugin does. I guess it has something to do with how Tailwind is integrated into the panel. To be honest, I wouldn’t know what causes a difference between v2 and v3 there except if you have also integrated it a special way.
Tailwind’s JIT mode works fine with Kirby3 frontend and it should work fine with the panel as well if you’re following the guide for configuration Kirby Panel uses Vue so be sure to include that, but also the php sources for the templates.
If you have the code of what you’re doing there, we may be able to help you better.
At least part of my problem ended up being a bug introduced in TailwindCSS 3 which I ran into by using too broad of a content setting (including the node_modules of my plugin, oops!).
There are still inconsistencies with v2 but I’m hoping those will be simpler to troubleshoot.
Oh, and the reason the frontend still worked is that it has a different tailwind.config.js which doesn’t need to go looking in the plugin for tailwind class names in addition to the component library.