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

1 Answer 1

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