visuellverstehen/statamic-classify

Classes not detected by Tailwind 3 JIT?

dambridge opened this issue · 7 comments

dambridge commented

Hey there, not sure if I'm missing something here.

I've added a number of classes to my config for links. None of them are recognized if the class doesn't already exist in the compiled CSS from Tailwind's JIT. If i manually add a div, say, with the desired classes, Tailwind detects and adds to CSS, which then makes the Bard content display properly.

jonassiewertsen commented

Thanks for reaching out @dambridge

If I do understand the problem correctly, that problem can't be solved by classify.

Could you give me a short feedback, if one of those two things resolves your issuse?

  1. Adding your classes to the safelist: https://tailwindcss.com/docs/content-configuration#safelisting-classes
  2. Adding the classify config file to the Tailwind content: https://tailwindcss.com/docs/content-configuration#configuring-source-paths
  • 👍1
dambridge commented

Yeah, was looking more at this too. I'll try these and let you know how it goes!

dambridge commented

OK, so 1, safe listing classes, works. 2 does not.

  • 👍1
jonassiewertsen commented

Thanks for the feedback!

I never tried option 2 personally but thought that it might work...

dambridge commented

Quick follow up. Looks like safe listing classes isn't doing it either. Only solution I can find is to put the classes somewhere in one of the scanned files that is hidden so the JIT can pick it up.

jonassiewertsen commented

The syntax for the safelist did change from version 2 to 3, did you adjust the settings?

Either way: I will merge the PR of John the next couple of days. He did a great job and does include a very nice solution for this issue, which should make this really easy and a no-brainer. Let's wait a few days and then check if everything is working as expected.

jonassiewertsen commented

I did some local tests and can confirm that both solutions do work:

  1. Adding your classes to the safelist: https://tailwindcss.com/docs/content-configuration#safelisting-classes
  2. Adding the classify config file to the Tailwind content: https://tailwindcss.com/docs/content-configuration#configuring-source-paths

I liked your way @JohnathonKoster a lot, but after some testing, the second option does work great and does the same as the export command, but needs zero configuration.

Out of maintainability reasons, I did remove the export command and hope that's ok: 5d35f73

I added documentation, to show how to add the config file to your TailwindCSS config file:
https://github.com/visuellverstehen/statamic-classify#working-with-css-frameworks-like-tailwind-css

Hopefully this helps to make things much clearer @dambridge 😊
Please reach out if not.

  • 🎉1