Add tailwindcss to Svelte

In this post, let's see how to integrate svelte with tailwindcss.

Installing dependencies

Run the below command

npm i --save-dev tailwindcss postcss-cli npm-run-all

Run the below command to create a tailwind config file

npx tailwind init

Open the tailwind.config.js file and add the below code

module.exports = {
  purge: ["./src/**/*.svelte"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Create a postcss.config.js file in the root directory and add the below code

const tailwindcss = require("tailwindcss");

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

Create tailwind.css in public folder

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

Open your index.html file and add below line in head

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

Now goto package.json and change the scripts with the below

"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:tailwind",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev",
    "autobuild": "rollup -c -w"
  },