Tailwind css not working while its deployed

Question

I have installed tailwind in my next.js app , its working in my localhost but when i deploy it to vercel or building it and running it, it doesn't use the tailwind classes and its looks like tailwind not installing when i deploy.

Here is my package json

{
  "name": "portofilo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.1.0",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0",
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.2.0",
    "react-typed": "^1.2.0",
    "react-vertical-timeline-component": "^3.3.3",
    "styled-components": "^5.3.0",
    "styled-normalize": "^8.0.7",
    "postcss-import": "^14.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^2.2.7"
  }
}

btw i moved devDependencies to dependencies but still not working

please share your tailwinds configuration. (edit the post and add tailwinds configuration) — nima, Aug 22 '21 at 13:07
moving tailwindcss module from devDependencies will not help you. it seems to be another issue. — nima, Aug 22 '21 at 13:09

score 0 · Answer 1 · answered Aug 21 '21 at 13:40

0

Make sure your purge are correctly configured in tailwind.config.js file

It should be like :

purge: [ "./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}", ],

answered Aug 21 '21 at 13:40

Foysal imran

111
1
11

score 0 · Accepted Answer · answered Aug 22 '21 at 19:51

0

i just added this line of code into my tailwind config file and it worked !

enabled: process.env.NODE_ENV === "production",

answered Aug 22 '21 at 19:51

Desert Fox

11
1
3

Tailwind css not working while its deployed

2 Answers2