Sapper: how install tailwindcss with sapper?

[jeffkenz89]

how install tailwindcss with sapper?it's compatible?

[Paulmicha]

There's a way to do it using https://github.com/kaisermann/svelte-preprocess/#with-sapper

Here's a working prototype : https://github.com/Paulmicha/contenta_sapper/tree/b38f25e69dcf8a8a10408edb8e815cc945725888

Note that this is not workable, because it takes about 30 seconds to compile when saving src/routes/index.svelte (it was a quick test).

I'm still trying to edit the rollup config to compile global styles separately (no luck so far : https://github.com/Paulmicha/contenta_sapper/commit/ac48e47947dfb8c54923a34c7f141222ca6e5a00)

[jeffkenz89]

@Paulmicha how about this way https://github.com/tailwindcss/setup-examples/tree/master/examples/sapper? i tried tailwind work but i don't know what this is for step to Create your Tailwind config file on ./node_modules/.bin/tailwind init tailwind.js ?

[skoontastic]

I created a PR this afternoon to fix the README.txt. Here's a link:

https://github.com/tailwindcss/setup-examples/blob/d85f305bfc797554b7624e10c523d9eb6dddc93f/examples/sapper/README.md

Basically, follow the README but at the init stage use this:

./node_modules/.bin/tailwind init

And then your postcss.config.json file should look like this:

// only needed if you want to purge
const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./src/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    require("tailwindcss"),

    // only needed if you want to purge
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

[Paulmicha]

Thanks, that's what I was trying to achieve.

Ideally, i would have liked to integrate the global styles compilation into the existing dev run script provided by the Sapper project template (hence my current failed test tweaks in rollup config, which unfortunately isn't very straightforward for the uninitiated).

[evdama]

there's a template that seems to work just fine https://github.com/langbamit/sapper-postcss-tailwind-rollup

[Paulmicha]

That's perfect, thanks ! I'll give it a spin and report my findings here in case anyone else is interested.

[Paulmicha]

Ok, so when using the normal Sapper template, here are the changes to make it work :

• Install required dependencies (npm i -D svelte-preprocess rollup-plugin-postcss)
• In rollup.config.js add the required imports (import getPreprocessor from "svelte-preprocess"; import postcss from "rollup-plugin-postcss"; import path from "path";), the SvelteExtractor class and postcssPlugins function from https://raw.githubusercontent.com/langbamit/sapper-postcss-tailwind-rollup/master/rollup.config.js then implement those in client and server exports
• In src/server.js, import the CSS file to be used as compilation entry point (e.g. mine is src/global.css and langbamit's version uses src/tailwind.css)

Ex: https://github.com/Paulmicha/contenta_sapper/tree/fac2cdfc460ea1a57aa71347871e76c3ce69e16c

[benwinding]

Thanks @skoontastic!

Your link helped me convert my existing Sapper project to use Tailwind css

https://github.com/tailwindcss/setup-examples/blob/d85f305bfc797554b7624e10c523d9eb6dddc93f/examples/sapper/README.md

Cheers,
Ben

[pngwn]

Closing as this seems resolved.

Github issues should be reserved for feature requests or bug reports. Support questions should be directed to the Svelte / Sapper Discord Chat or asked at Stack Overflow with the svelte/sapper tags.