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": "/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": { "/rest": "^21.0.2", "next": "14.2.11", "next-themes": "^0.3.0", "react": "^18", "react-dom": "^18" }, "devDependencies": { "/node": "^20", "/react": "^18", "/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.11", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } }
