Deploying on Vercel, tailwind classes missing?

utdev · 2023-04-06T23:42:27.033Z

Does anyone have issues with deploying on vercel? Right now my app is deployed but my tailwind classes have no value, which is why my page looks wrong. Locally it looks fine with the dev and build command

D

dopeinc•4/6/23, 11:53 PM

Can you send us your package.json and your tailwind config it could be something In there maybe

D

dopeinc•4/6/23, 11:53 PM

Its hard to tell withiut more info

U

utdevOP•4/6/23, 11:53 PM

Sure this is my package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "cy:open": "cypress open",
    "cy:run": "cypress run --component"
  },
  "dependencies": {
    "@boringer-avatars/react": "^0.1.0",
    "@clerk/nextjs": "^4.11.13",
    "@clerk/themes": "^1.4.9",
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.13",
    "@hookform/resolvers": "^2.9.10",
    "@prisma/client": "^4.8.0",
    "@radix-ui/react-popover": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.4",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tanstack/react-query": "^4.20.0",
    "@trpc/client": "^10.8.1",
    "@trpc/next": "^10.8.1",
    "@trpc/react-query": "^10.8.1",
    "@trpc/server": "^10.8.1",
    "ace-builds": "^1.14.0",
    "argon2": "^0.30.3",
    "aws-sdk": "^2.1318.0",
    "cheerio": "1.0.0-rc.12",
    "class-variance-authority": "^0.4.0",
    "classnames": "^2.3.2",
    "csstype": "3.0.10",
    "framer-motion": "^8.4.3",
    "html-pdf-node": "^1.0.8",
    "html-to-pdfmake": "^2.4.15",
    "jsdom": "^21.1.0",
    "lucide-react": "^0.109.0",
    "net": "^1.0.2",
    "next": "13.1.1",
    "next-qrcode": "^2.4.1",
    "next-router-mock": "^0.9.2",
    "next-themes": "^0.2.1",
    "node-fetch": "^3.3.0",
    "pdfmake": "^0.2.7",
    "playwright-core": "^1.30.0",
    "react": "18.2.0",
    "react-ace": "^10.1.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.42.0",
    "react-hot-toast": "^2.4.0",
    "react-loading-skeleton": "^3.2.0",
    "react-use": "^17.4.0",
    "sharp": "^0.31.3",
    "stripe": "^11.16.0",
    "superjson": "1.9.1",
    "tailwind-merge": "^1.9.0",
    "tailwindcss-animate": "^1.0.5",
    "tls": "^0.0.1",
    "zod": "^3.20.2",
    "zustand": "^4.3.2"
  },

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "cy:open": "cypress open",
    "cy:run": "cypress run --component"
  },
  "dependencies": {
    "@boringer-avatars/react": "^0.1.0",
    "@clerk/nextjs": "^4.11.13",
    "@clerk/themes": "^1.4.9",
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.13",
    "@hookform/resolvers": "^2.9.10",
    "@prisma/client": "^4.8.0",
    "@radix-ui/react-popover": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.4",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tanstack/react-query": "^4.20.0",
    "@trpc/client": "^10.8.1",
    "@trpc/next": "^10.8.1",
    "@trpc/react-query": "^10.8.1",
    "@trpc/server": "^10.8.1",
    "ace-builds": "^1.14.0",
    "argon2": "^0.30.3",
    "aws-sdk": "^2.1318.0",
    "cheerio": "1.0.0-rc.12",
    "class-variance-authority": "^0.4.0",
    "classnames": "^2.3.2",
    "csstype": "3.0.10",
    "framer-motion": "^8.4.3",
    "html-pdf-node": "^1.0.8",
    "html-to-pdfmake": "^2.4.15",
    "jsdom": "^21.1.0",
    "lucide-react": "^0.109.0",
    "net": "^1.0.2",
    "next": "13.1.1",
    "next-qrcode": "^2.4.1",
    "next-router-mock": "^0.9.2",
    "next-themes": "^0.2.1",
    "node-fetch": "^3.3.0",
    "pdfmake": "^0.2.7",
    "playwright-core": "^1.30.0",
    "react": "18.2.0",
    "react-ace": "^10.1.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.42.0",
    "react-hot-toast": "^2.4.0",
    "react-loading-skeleton": "^3.2.0",
    "react-use": "^17.4.0",
    "sharp": "^0.31.3",
    "stripe": "^11.16.0",
    "superjson": "1.9.1",
    "tailwind-merge": "^1.9.0",
    "tailwindcss-animate": "^1.0.5",
    "tls": "^0.0.1",
    "zod": "^3.20.2",
    "zustand": "^4.3.2"
  },

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "cy:open": "cypress open",
    "cy:run": "cypress run --component"
  },
  "dependencies": {
    "@boringer-avatars/react": "^0.1.0",
    "@clerk/nextjs": "^4.11.13",
    "@clerk/themes": "^1.4.9",
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.13",
    "@hookform/resolvers": "^2.9.10",
    "@prisma/client": "^4.8.0",
    "@radix-ui/react-popover": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.4",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tanstack/react-query": "^4.20.0",
    "@trpc/client": "^10.8.1",
    "@trpc/next": "^10.8.1",
    "@trpc/react-query": "^10.8.1",
    "@trpc/server": "^10.8.1",
    "ace-builds": "^1.14.0",
    "argon2": "^0.30.3",
    "aws-sdk": "^2.1318.0",
    "cheerio": "1.0.0-rc.12",
    "class-variance-authority": "^0.4.0",
    "classnames": "^2.3.2",
    "csstype": "3.0.10",
    "framer-motion": "^8.4.3",
    "html-pdf-node": "^1.0.8",
    "html-to-pdfmake": "^2.4.15",
    "jsdom": "^21.1.0",
    "lucide-react": "^0.109.0",
    "net": "^1.0.2",
    "next": "13.1.1",
    "next-qrcode": "^2.4.1",
    "next-router-mock": "^0.9.2",
    "next-themes": "^0.2.1",
    "node-fetch": "^3.3.0",
    "pdfmake": "^0.2.7",
    "playwright-core": "^1.30.0",
    "react": "18.2.0",
    "react-ace": "^10.1.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.42.0",
    "react-hot-toast": "^2.4.0",
    "react-loading-skeleton": "^3.2.0",
    "react-use": "^17.4.0",
    "sharp": "^0.31.3",
    "stripe": "^11.16.0",
    "superjson": "1.9.1",
    "tailwind-merge": "^1.9.0",
    "tailwindcss-animate": "^1.0.5",
    "tls": "^0.0.1",
    "zod": "^3.20.2",
    "zustand": "^4.3.2"
  },

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "cy:open": "cypress open",
    "cy:run": "cypress run --component"
  },
  "dependencies": {
    "@boringer-avatars/react": "^0.1.0",
    "@clerk/nextjs": "^4.11.13",
    "@clerk/themes": "^1.4.9",
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.13",
    "@hookform/resolvers": "^2.9.10",
    "@prisma/client": "^4.8.0",
    "@radix-ui/react-popover": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.4",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tanstack/react-query": "^4.20.0",
    "@trpc/client": "^10.8.1",
    "@trpc/next": "^10.8.1",
    "@trpc/react-query": "^10.8.1",
    "@trpc/server": "^10.8.1",
    "ace-builds": "^1.14.0",
    "argon2": "^0.30.3",
    "aws-sdk": "^2.1318.0",
    "cheerio": "1.0.0-rc.12",
    "class-variance-authority": "^0.4.0",
    "classnames": "^2.3.2",
    "csstype": "3.0.10",
    "framer-motion": "^8.4.3",
    "html-pdf-node": "^1.0.8",
    "html-to-pdfmake": "^2.4.15",
    "jsdom": "^21.1.0",
    "lucide-react": "^0.109.0",
    "net": "^1.0.2",
    "next": "13.1.1",
    "next-qrcode": "^2.4.1",
    "next-router-mock": "^0.9.2",
    "next-themes": "^0.2.1",
    "node-fetch": "^3.3.0",
    "pdfmake": "^0.2.7",
    "playwright-core": "^1.30.0",
    "react": "18.2.0",
    "react-ace": "^10.1.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.42.0",
    "react-hot-toast": "^2.4.0",
    "react-loading-skeleton": "^3.2.0",
    "react-use": "^17.4.0",
    "sharp": "^0.31.3",
    "stripe": "^11.16.0",
    "superjson": "1.9.1",
    "tailwind-merge": "^1.9.0",
    "tailwindcss-animate": "^1.0.5",
    "tls": "^0.0.1",
    "zod": "^3.20.2",
    "zustand": "^4.3.2"
  },

U

utdevOP•4/6/23, 11:53 PM

  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@total-typescript/ts-reset": "^0.3.7",
    "@types/html-pdf-node": "^1.0.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.11.18",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.47.1",
    "@typescript-eslint/parser": "^5.47.1",
    "autoprefixer": "^10.4.7",
    "cypress": "^12.7.0",
    "cypress-axe": "^1.4.0",
    "eslint": "^8.30.0",
    "eslint-config-next": "13.1.1",
    "eslint-plugin-cypress": "^2.12.1",
    "jest": "^29.4.3",
    "jest-environment-jsdom": "^29.4.3",
    "postcss": "^8.4.14",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "prisma": "^4.8.0",
    "tailwindcss": "^3.2.0",
    "ts-jest": "^29.0.5",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  },
}

  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@total-typescript/ts-reset": "^0.3.7",
    "@types/html-pdf-node": "^1.0.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.11.18",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.47.1",
    "@typescript-eslint/parser": "^5.47.1",
    "autoprefixer": "^10.4.7",
    "cypress": "^12.7.0",
    "cypress-axe": "^1.4.0",
    "eslint": "^8.30.0",
    "eslint-config-next": "13.1.1",
    "eslint-plugin-cypress": "^2.12.1",
    "jest": "^29.4.3",
    "jest-environment-jsdom": "^29.4.3",
    "postcss": "^8.4.14",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "prisma": "^4.8.0",
    "tailwindcss": "^3.2.0",
    "ts-jest": "^29.0.5",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  },
}

  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@total-typescript/ts-reset": "^0.3.7",
    "@types/html-pdf-node": "^1.0.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.11.18",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.47.1",
    "@typescript-eslint/parser": "^5.47.1",
    "autoprefixer": "^10.4.7",
    "cypress": "^12.7.0",
    "cypress-axe": "^1.4.0",
    "eslint": "^8.30.0",
    "eslint-config-next": "13.1.1",
    "eslint-plugin-cypress": "^2.12.1",
    "jest": "^29.4.3",
    "jest-environment-jsdom": "^29.4.3",
    "postcss": "^8.4.14",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "prisma": "^4.8.0",
    "tailwindcss": "^3.2.0",
    "ts-jest": "^29.0.5",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  },
}

  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@total-typescript/ts-reset": "^0.3.7",
    "@types/html-pdf-node": "^1.0.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.11.18",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.47.1",
    "@typescript-eslint/parser": "^5.47.1",
    "autoprefixer": "^10.4.7",
    "cypress": "^12.7.0",
    "cypress-axe": "^1.4.0",
    "eslint": "^8.30.0",
    "eslint-config-next": "13.1.1",
    "eslint-plugin-cypress": "^2.12.1",
    "jest": "^29.4.3",
    "jest-environment-jsdom": "^29.4.3",
    "postcss": "^8.4.14",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "prisma": "^4.8.0",
    "tailwindcss": "^3.2.0",
    "ts-jest": "^29.0.5",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  },
}

D

dopeinc•4/6/23, 11:54 PM

Also any error on prod build or console ?

U

utdevOP•4/6/23, 11:54 PM

And this is my tailwind config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f5f6fa',
          '100': '#eaecf4',
          '200': '#d0d6e7',
          '300': '#a6b3d3',
          '400': '#7689ba',
          '500': '#556aa2',
          '600': '#415388',
          '700': '#36436e',
          '800': '#303b5c',
          '900': '#2d3551',
        },
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwindcss-animate')
  ],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f5f6fa',
          '100': '#eaecf4',
          '200': '#d0d6e7',
          '300': '#a6b3d3',
          '400': '#7689ba',
          '500': '#556aa2',
          '600': '#415388',
          '700': '#36436e',
          '800': '#303b5c',
          '900': '#2d3551',
        },
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwindcss-animate')
  ],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f5f6fa',
          '100': '#eaecf4',
          '200': '#d0d6e7',
          '300': '#a6b3d3',
          '400': '#7689ba',
          '500': '#556aa2',
          '600': '#415388',
          '700': '#36436e',
          '800': '#303b5c',
          '900': '#2d3551',
        },
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwindcss-animate')
  ],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f5f6fa',
          '100': '#eaecf4',
          '200': '#d0d6e7',
          '300': '#a6b3d3',
          '400': '#7689ba',
          '500': '#556aa2',
          '600': '#415388',
          '700': '#36436e',
          '800': '#303b5c',
          '900': '#2d3551',
        },
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwindcss-animate')
  ],
}

U

utdevOP•4/6/23, 11:54 PM

no errors

U

utdevOP•4/6/23, 11:54 PM

build process works fine on vercel and locally aswell

D

dopeinc•4/6/23, 11:57 PM

And if you run next build next start locally it works ?

U

utdevOP•4/6/23, 11:58 PM

instead of pnpm?

D

dopeinc•4/6/23, 11:58 PM

Content seems fine in tailwind config

U

utdevOP•4/6/23, 11:58 PM

I do

pnpm run build

pnpm run build

pnpm run build

pnpm run build and

pnpm run start

pnpm run start

pnpm run start

pnpm run start

D

dopeinc•4/6/23, 11:59 PM

Yes

D

dopeinc•4/6/23, 11:59 PM

And they work ?

U

utdevOP•4/6/23, 11:59 PM

that works fine

U

utdevOP•4/6/23, 11:59 PM

yes

D

dopeinc•4/6/23, 11:59 PM

Have you tried rebuilding on vercel

U

utdevOP•4/7/23, 12:00 AM

yes deleted it and started it, same issue

D

dopeinc•4/7/23, 12:02 AM

And if you loon at the generated css there is just nothing on debugger chrome or something ?

D

dopeinc•4/7/23, 12:02 AM

Look *

U

utdevOP•4/7/23, 12:03 AM

no there is nothing

U

utdevOP•4/7/23, 12:03 AM

the html contains the proper classes

U

utdevOP•4/7/23, 12:04 AM

but the dev console does not show the proper values for the classes

U

utdevOP•4/7/23, 12:04 AM

like none

D

dopeinc•4/7/23, 12:04 AM

Can you show how you are using those classes

D

dopeinc•4/7/23, 12:04 AM

But the weird part

D

dopeinc•4/7/23, 12:04 AM

Is that it work when doing local build

D

dopeinc•4/7/23, 12:04 AM

I would expect it to fail there

U

utdevOP•4/7/23, 12:04 AM

Looks like this

Bildschirmfoto_2023-04-07_um_02.04.44.png

D

dopeinc•4/7/23, 12:06 AM

Did you change the root in vercel config ?

D

dopeinc•4/7/23, 12:07 AM

If not it could be because of dynamically injected classes

D

dopeinc•4/7/23, 12:07 AM

But I thought this was fixed already

U

utdevOP•4/7/23, 12:07 AM

hmm the root?

U

utdevOP•4/7/23, 12:08 AM

oh you mean on vercel, no I kept it

D

dopeinc•4/7/23, 12:08 AM

Well I am .. confused maybe someone else could help

U

utdevOP•4/7/23, 12:09 AM

yeah maybe I need to get some sleep

U

utdevOP•4/7/23, 12:09 AM

but thanks for the help

U

utdevOP•4/7/23, 12:09 AM

I will try it tomorrow again

D

dopeinc•4/7/23, 12:09 AM

Tried my best sorry

D

dopeinc•4/7/23, 12:10 AM

Its like it cant find the css generated at all

D

dopeinc•4/7/23, 12:11 AM

Maybe if you applied dynamic classes but I thiught the same would happen locally

U

utdevOP•4/7/23, 9:40 AM

I got it working

U

utdevOP•4/7/23, 9:41 AM

it was acutally a bug with my version, I upgraded to nextjs 13.3.0 now and it works

U

utdevOP•4/7/23, 9:41 AM

D

dopeinc•4/7/23, 12:32 PM

Good stuff was abiut to tell you to update since it was the last step good job

Deploying on Vercel, tailwind classes missing?

Similar Threads

Similar Threads

Similar Threads