Theo's Typesafe Cult•2y 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•2y 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

utdevOP•2y 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•2y ago

Also any error on prod build or console ?

utdevOP•2y 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•2y ago

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

utdevOP•2y ago

instead of pnpm?

dopeinc•2y ago

Content seems fine in tailwind config

utdevOP•2y ago

I do pnpm run build and pnpm run start

dopeinc•2y ago

Yes And they work ?

utdevOP•2y ago

that works fine yes

dopeinc•2y ago

Have you tried rebuilding on vercel

utdevOP•2y ago

yes deleted it and started it, same issue

dopeinc•2y ago

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

utdevOP•2y 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•2y 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

utdevOP•2y ago

Looks like this

dopeinc•2y 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

utdevOP•2y ago

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

dopeinc•2y ago

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

utdevOP•2y ago

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

dopeinc•2y 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

utdevOP•2y 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•2y 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?