Kirby, Kirbyup & Tailwind class order issue

[adamkiss]

I'm not sure this necessarily belongs here, but I've just spent an hour debugging it, and I thought it should be noted somewhere, and since kirbyup + tailwind is one of the official examples, I thought you might want to include a warning or a note:

If you're using kirbyup with tailwind in two separate plugins, and the latter uses the same class as the one loaded earlier, it might happen that your responsive tailwind classes will stop working, since kirby just smushes the generated CSS together into one CSS file.

Example:

/* first-plugin/index.css */
.p-2 {}
.lg\:p-4 {}

/* second-plugin/index.css */
.p-2 {}

Now the element with p-2 lg:p4 from first plugin will stay at p-2, since the second plugin redefines the p-2 class much later in the resulting index.css file.

Solutions:

• either configure the first plugin to use important by default, which is stupid
• prefix the latter (second) plugin with a custom tailwind prefix, so the css classes don't colide

[johannschopplich]

Good point for plugin devs. Looks like a nice addition to the README of the Tailwind example. Will add that.

[johannschopplich]

Much appreciated you took a look into this and wrote this issue, @adamkiss!

Added a note based on your words in https://github.com/johannschopplich/kirbyup/commit/6229e5baf1d9457f8e1256e4d4f85f31b32b4d80.