DEV Community

Discussion on: Using TailwindCSS with SvelteJS

Collapse
 
collardeau profile image
Thomas Collardeau

I've noticed as soon as I import main.css, I lose the styles defined in my svelte components (using the style tag as normal). I don't mind so much as I prefer to do all my styling with Tailwind and using apply, but is that to be expected? Just want to make sure I'm not doing something wrong.

Collapse
 
collardeau profile image
Thomas Collardeau

I've actually solved this, so the Svelte styles work as normal alongside Tailwind:

  • in rollup.config.js give a name to the extracted CSS so it doesn't clash with the CSS generated by Svelte, for example:
postcss({ extract: "public/tailwind.css" })
  • link that CSS from public/index.html
<link rel="stylesheet" href="/tailwind.css" />

  • add public/tailwind.css to .gitignore