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

[Mike]

Thanks for sharing that. I'm having issues with responsive classes such as sm:block. Using it throws an error saying that class doesn't exist. Are others able to use responsive classes with the approach explained in this article?

[sarioglu]

Hi Mike,
Thanks for your comment. Unfortunately I couldn't reproduce this issue. But it can be caused by one of following reasons:

• If it is a production-only bug, it may be due to Purgess config. You can refer to tailwindcss.com/docs/controlling-f... for correct usage.
• responsive variant may be disabled in your tailwind config. You can solve it using tailwindcss.com/docs/display#respo...

[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.