How to use TailwindCSS wtih @nxext/svelte?

Hey, how can I use TailwindCSS properly with Svelte? I’ve tried to use custom rollup.config.js, but it does not work.

Always received the following error:

Error during bundle: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

I think something is with postcss, but not sure.

[andrasbacsai]

Wow, cool. It just works. And as we are adding tailwind into .svelte, we can use @apply. 🎉 Also, with this configuration, we could use purge in development to improve postcss performance (tailwind.config.js):

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true
    },
    purge: {
      enabled: true,
      content: ["./apps/**/*.svelte", "./apps/**/*.html"],
      whitelistPatterns: [/svelte-/],
    },
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  } 

[DominikPieper]

@andrasbacsai I added another maybe helpful option to archive that, you’re able to hook in a method to configure the svelte preprocessor with something like this:

function setSveltePreprocessOptions(options) {
  return {
    postcss: {
      plugins: [
        require('postcss-import')(),
        require('postcss-nested')(), // Remove if you can't wan't to use nested structures.
        require('tailwindcss')(options.projectRoot + '/tailwind.config.js'),
      ]
    }
  };
}

module.exports = setSveltePreprocessOptions;

now you’re able to e.g. add a Tailwind.svelte with

<style global>
	@tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

and import it in your app component