SvelteKit guide could be better

[longrunningprocess]

ref: https://tailwindcss.com/docs/guides/sveltekit

I noticed a problem in @apply when I tried using a modifier and it resulted in me having to consult https://github.com/svelte-add/tailwindcss to get the configuration just right.

   @apply text-sky-500

worked just fine but when I tried to add the dark modifier things broke some syntax:

   @apply text-sky-500 dark: text-sky-700

Once I ran the svelte-add, everything worked fine.

I'm wondering whether the guide could simply point to the svelte-add/tailwindcss repo above or at least make an "advanced config" note about?

Thanks for the consideration

[adamwathan]

Can you provide a reproduction showing something that doesn't work after following the setup instructions? Generally we try to document how to configure things from first principles instead of relying on external packages that are outside of our control.

Based on what you've shared I would expect this to not work because of the space between dark: and text-sky-700 in dark: text-sky-700, it needs to be dark:text-sky-700.

[longrunningprocess]

I'm so sorry about the space, that was not meant to be there (typo on my part), it was dark:text-sky-700.

Generally we try to document how to configure things from first principles instead of relying on external packages that are outside of our control.

I respect and appreciate that. All you have to do is add the modifier (without the space) in a very simple install from the provided instructions to see the error. I'm guessing if you have one laying around already you could see it fail quickly, otherwise I'll need to set up a repo for you so you can repro easily with a clone, install and run.

[adamwathan]

Yeah if you don't mind providing a reproduction that would really increase the odds of us actually looking at this 👍🏻 Generally if we have to create the reproduction ourselves these things tend to sit untouched until we prioritize a big GitHub clean up, which we only do a couple of times per year.

[longrunningprocess]

:-D yeah I know how that goes... sure I'll work on it tomorrow.

[longrunningprocess]

Here you go @adamwathan , I've "journaled" the relevant info in the README: https://github.com/longrunningprocess/tailwind-sveltekit-guide-issue-1221

[thecrypticace]

This is caused by a CSS parsing issue in Svelte. Someone opened an issue last year and it was later closed without resolution: sveltejs/svelte#6133

I've prepped an update for the SvelteKit guide in #1266 that adds a step for svelte-preprocess

[longrunningprocess]

Thanks @thecrypticace 🎉