Hi All,
I’ve tried to deploy to vercel but my Tailwind classes are not working when rendering the page. It works fine locally, and it works fine when I deploy to netlify.com. I can’t work out what vercel wants that netlify etc doesn’t?
I’ve put my vercel.json, tailwind.ts and package.json below if it helps…
vercel.json
{
“version”: 2,
“builds”: [
{
“src”: “package.json”,
“use”: “@vercel/next”
}
],
“routes”: [
{
“src”: “/(.*)”,
“dest”: “/”
}
]
}
tailwind.config.ts
import type { Config } from “tailwindcss”;
const config: Config = {
content: [
“./src/pages//*.{js,ts,jsx,tsx,mdx}",
"./src/components//.{js,ts,jsx,tsx,mdx}",
"./src/app/**/.{js,ts,jsx,tsx,mdx}”,
],
theme: {
extend: {
colors: {
background: “var(–background)”,
foreground: “var(–foreground)”,
},
backgroundColor: {
‘theme-background’: ‘var(–theme-background)’,
},
textColor: {
‘theme-text’: ‘var(–theme-text)’,
},
},
},
plugins: ,
};
export default config;
package.json
{
“name”: “watchlist-guru”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
“dependencies”: {
“@octokit/rest”: “^21.0.2”,
“next”: “14.2.11”,
“next-themes”: “^0.3.0”,
“react”: “^18”,
“react-dom”: “^18”
},
“devDependencies”: {
“@types/node”: “^20”,
“@types/react”: “^18”,
“@types/react-dom”: “^18”,
“eslint”: “^8”,
“eslint-config-next”: “14.2.11”,
“postcss”: “^8”,
“tailwindcss”: “^3.4.1”,
“typescript”: “^5”
}
}
