Snowpack: How can this work with something like tailwindcss?

[brielov]

TailwindCSS is a postCSS plugin and works very nice with purgeCSS. How can I make this work with pika?

[FredKSchott]

See https://tailwindcss.com/docs/installation/#using-tailwind-cli for using Tailwind without the dependency on postcss.

[Miaourt]

Hi, sorry to dig it up again, but TailwindCSS is somehow "not possible" without PurgeCSS in production...

Wondering if a processor like PurgeCSS is something breaking up greatly with Snowpack's phylosophy 😁

[FredKSchott]

I don’t know enough about tailwind, but it seems like the CLI is able to read in your CSS and only install the necessary parts of it that you use?

If not, then you may want to look into aDDING A postCSS/purgeCSS step for your deployment process, that only runs on production deployment.

If you can get something that works for you, I’d be happy to add it to our official guide

[Miaourt]

Tailwind isn't targeting CSS trimming, it rely on PurgeCSS, wich is a Postcss plugin yes.
If I do add a PostCSS deps wouldn't it defeat the purpose of Snowpack ?

[brielov]

@Miaourt Well I don't think so, Snowpack already does some preprocessing with typescript and babel

[FredKSchott]

The best would be if you can add purgeCSS/postCSS as a production-only step. In development we care less about file size, so we could still get the speedy local dev environment without a dev-runs-on-every-change build step.

But, if you need this to run during dev, you're still getting a good iteration speed boost because you're not having to re-bundle your site on every change (just individual files, and in this case only for CSS).

[agneym]

Setup a repo with what was mentioned by @FredKSchott . Available on Github at https://github.com/agneym/tailwind-snowpack

[FredKSchott]

Awesome! Hoping to make this even easier in Snowpack v2

[luwes]

thanks @FredKSchott.
I haven't gotten it to work yet on v2 with

// snowpack.config.json
"scripts": { 
  "build:css": "postcss"
}

adding the source/dest neither

"build:css": "postcss src/css/demo.css -o public/css/demo.css"

does it require anything else?

[FredKSchott]

huh, that definitely should be working. "build:css" would run on every mounted "css" file, and pipe the file input through the postcss CLI. My best guess is that your postcss.config.js file isn't getting read properly.

If you share a repo, I can help you debug more.

[luwes]

thanks for the quick reply! unfortunately it's still a private repo, can't share yet.

the src/css folder gets mounted to /css now but seems not processed by postcss.

my snowpack config

const fs = require("fs");
const path = require("path");

const cwd = process.cwd();

const scripts = {
  "mount:css": "mount src/css --to css",
  "mount:public": "mount public --to .",
  "mount:web_modules": "mount web_modules",
  "mount:src": "mount src --to _dist_",
  "lintall:11ty": "eleventy",
  "lintall:11ty::watch": "$1 --watch"
};

const buildId = "build:js,jsx";
if (
  fs.existsSync(path.join(cwd, "babel.config.json")) ||
  fs.existsSync(path.join(cwd, "babel.config.js")) ||
  fs.existsSync(path.join(cwd, "babel.config.cjs")) ||
  fs.existsSync(path.join(cwd, "babel.config.mjs"))
) {
  scripts[buildId] = "babel --filename $FILE";
} else {
  const bundledConfig = path.join(__dirname, "babel.config.json");
  scripts[buildId] = `babel --filename $FILE --config-file ${bundledConfig}`;
}

if (fs.existsSync(path.join(cwd, "postcss.config.js"))) {
  scripts["build:css"] = "postcss";
} else {
  const bundledConfig = path.join(__dirname, "postcss.config.js");
  scripts["build:css"] = `postcss --config ${bundledConfig}`;
}

module.exports = {
  scripts,
  devOptions: {},
  installOptions: {},
};

[FredKSchott]

Bah, you're right, we're not running postcss properly here. Fix for Snowpack created: https://github.com/pikapkg/snowpack/pull/319

Thanks for helping us find this! Until a fix is published, you can install this PR package directly via: https://github.com/pikapkg/snowpack/pull/319/checks?check_run_id=668159504

[FredKSchott]

snowpack 2.0.0-beta.18 published

[luwes]

great! will test it out. thank you!

[itaditya]

I tried it out, works great. Thanks @FredKSchott

https://github.com/itaditya/snowpack-react-app

One slight issue is that though the tailwind css purging happens correctly it still shows this warning in the termninal.

[FredKSchott]

Yup, looks like it's trying to run your postcss job again at bundle time. Just published a new version which should fix this. Can you try the latest and see if you get the same error?