Theo's Typesafe Cult•15mo ago

Deploying on Vercel, tailwind classes missing?

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

23 Replies

dopeinc•15mo ago

Can you send us your package.json and your tailwind config it could be something In there maybe Its hard to tell withiut more info

utdev•15mo ago

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"
  },

  "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"
  },
}

dopeinc•15mo ago

Also any error on prod build or console ?

utdev•15mo ago

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')
  ],
}

no errors build process works fine on vercel and locally aswell

dopeinc•15mo ago

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

utdev•15mo ago

instead of pnpm?

dopeinc•15mo ago

Content seems fine in tailwind config

utdev•15mo ago

I do pnpm run build and pnpm run start

dopeinc•15mo ago

Yes And they work ?

utdev•15mo ago

that works fine yes

dopeinc•15mo ago

Have you tried rebuilding on vercel

utdev•15mo ago

yes deleted it and started it, same issue

dopeinc•15mo ago

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

utdev•15mo ago

no there is nothing the html contains the proper classes but the dev console does not show the proper values for the classes like none

dopeinc•15mo ago

Can you show how you are using those classes But the weird part Is that it work when doing local build I would expect it to fail there

utdev•15mo ago

Looks like this

dopeinc•15mo ago

Did you change the root in vercel config ? If not it could be because of dynamically injected classes But I thought this was fixed already

utdev•15mo ago

hmm the root? oh you mean on vercel, no I kept it

dopeinc•15mo ago

Well I am .. confused maybe someone else could help ☹️

utdev•15mo ago

yeah maybe I need to get some sleep 😄 but thanks for the help I will try it tomorrow again

dopeinc•15mo ago

Tried my best sorry Its like it cant find the css generated at all Maybe if you applied dynamic classes but I thiught the same would happen locally

utdev•15mo ago

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

dopeinc•15mo ago

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

Gaming

Programming

Deploying on Vercel, tailwind classes missing?