CODEWITHSUNDEEP
deploymentnext.jstailwind-cssvercel
Tanishq SIngh Anand
Tanishq SIngh Anand

Reputation: 61

Tailwind CSS styles not applied on deployed NextJs app on Vercel

All tailwind styles are broken on the deployed version Localhost enter image description here Deployed version enter image description here

MY tailwind config :

module.exports = {
  mode: "jit",
  purge: [
    "./pages/**/*.{js, ts, jsx, tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("tailwind-scrollbar"),
    require("tailwind-scrollbar-hide"),
  ],
};

Upvotes: 0

Views: 987

Answers (1)

Suraj Air
Suraj Air

Reputation: 2113

Try disabling the JIT mode. Not sure how you are adding classes to tags, but if its dynamic JIT doesn't work properly. I faced similar issue during my recent development.

module.exports = {
  purge: [
    "./pages/**/*.{js, ts, jsx, tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("tailwind-scrollbar"),
    require("tailwind-scrollbar-hide"),
  ],
};

Upvotes: 0

Related Questions