I've continuously been trying for days to get Tailwind classes working with my Svelte project. I followed the exact steps from here and still nothing works.

Here's the structure of my svelte project:

The postcss.config.cjs code:

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

The tailwind.config.js code:

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: {
    content: ["./src/App.svelte"],
    enabled: production, // disable purge in dev
  },
};

in tailwind.css file:

@tailwind base;
@tailwind ponents;
@tailwind utilities;

in package.json file:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public",
    "serve": "serve public -p 80",
    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
  },

  "devDependencies": {
    "@rollup/plugin-monjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@types/autoprefixer": "^10.2.0",
    "concurrently": "^7.2.2",
    "cross-env": "^7.0.3",
    "postcss-cli": "^7.1.2",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "sirv-cli": "^2.0.0",
    "tailwindcss": "^3.1.3"
  }
}

What is it that I'm doing wrong? I've looked for so many answers on the web but still nothing works in my laptop... Tho, the Tailwind CDN works but that's not what I wanted!

I've continuously been trying for days to get Tailwind classes working with my Svelte project. I followed the exact steps from here and still nothing works.

Here's the structure of my svelte project:

The postcss.config.cjs code:

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

The tailwind.config.js code:

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: {
    content: ["./src/App.svelte"],
    enabled: production, // disable purge in dev
  },
};

in tailwind.css file:

@tailwind base;
@tailwind ponents;
@tailwind utilities;

in package.json file:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public",
    "serve": "serve public -p 80",
    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
  },

  "devDependencies": {
    "@rollup/plugin-monjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@types/autoprefixer": "^10.2.0",
    "concurrently": "^7.2.2",
    "cross-env": "^7.0.3",
    "postcss-cli": "^7.1.2",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "sirv-cli": "^2.0.0",
    "tailwindcss": "^3.1.3"
  }
}

What is it that I'm doing wrong? I've looked for so many answers on the web but still nothing works in my laptop... Tho, the Tailwind CDN works but that's not what I wanted!

• javascript
• tailwind-css
• svelte

Share Improve this question Follow asked Jun 20, 2022 at 10:58 Abhay SalviAbhay Salvi 1,12944 gold badges1818 silver badges4848 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This is probably not the best instruction set to go off of. Since you're already using rollup which can handle some of this, adding additional scripts just plicates things. Also, usually (AFAIK