Discussion on: [Update] Using Svelte with Tailwindcss - A better approach

[Mike]

Thanks for your response. I cloned your repo and changed App.svelte's style to the following:

h1 {
  @apply bg-black text-white md:text-red-200;
}

This throws the same error I see in my project:

[!] (plugin svelte) CssSyntaxError: /home/mikenikles/dev/github/sarioglu/svelte-tailwindcss-template/src/App.svelte:3:3: `@apply` cannot be used with `.md\:text-red-200` because `.md\:text-red-200` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.md\:text-red-200` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
src/App.svelte

Are you able to use responsive classes such as md:text-red-200?

[sarioglu]

I'm afraid it is a limitation of tailwindcss. It cannot @apply variants directly. You can use it directly or find a workaround at tailwindcss.com/docs/functions-and...

[Mike]

Thank you, that helped fix the issue. @screen and regular Tailwind utility classes works as documented.