GauravRajSharma / demo-webhooks

intro to webhooks based deployment demo

Svelte

Setting up Tailwind with svelte is really simple, just install Tailwind and pocstcss-cli:

npm install tailwindcss postcss-cli --save-dev

If you want to remove unused styles, add PurgeCSS as well

npm install @fullhuman/postcss-purgecss

Create your Tailwind config file

npx tailwind init

Create a postcss.config.js file and add this to it

const tailwindcss = require("tailwindcss");

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

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),

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

Next, create a CSS file for your Tailwind styles. You have to store in it public folder public/tailwind.css and add this to it :

@tailwind base;
@tailwind components;
@tailwind utilities;

Update your package.json with the custom scripts.

build:tailwind is only needed if you want to purge

"scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "dev": "run-p start:dev autobuild watch:build",
    "build": "npm run build:tailwind && rollup -c",

}

Finally, add a stylesheet link to your public/index.html file

<link rel="stylesheet" href="index.css" />

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build