Tailwind classes not working in Svelte app

Question

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 components;
@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-commonjs": "^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!

user_197546 · Answer

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 complicates things. Also, usually (AFAIK‍♂️) the tailwind is imported through a dedicated svelte component.

I would add tailwindcss and autoprefixer this to your rollup.config.js, then you don't need to use watch:tailwind

export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [require('tailwindcss')(), require('autoprefixer')()],
        },
      }),
    }),
    // ...
  ],
  // ...
}

if you put this into a Tailwind.svelte component

Then you can include via in your application

Here are some other sources that you might want to look at

Tailwind classes not working in Svelte app

1 Answers