I am using Sveltekit and Tailwindcss v4.When I checked locally, tailwindcss was working.However, when deployed in vercel, Tailwindcss did not work.I was told that it would work if I changed the settings in tailwind.config.js
, but v4 does not use tailwind.config.js
, so I cannot change the settings.How can I make it work better?
src/app.css
@import 'tailwindcss';
svelte.config.js
import adapter from '@sveltejs/adapter-vercel';import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';/** @type {import('@sveltejs/kit').Config} */const config = { // Consult https://svelte.dev/docs/kit/integrations // for more information about preprocessors preprocess: vitePreprocess(), kit: { adapter: adapter() }};export default config;
vite.config.ts
import tailwindcss from '@tailwindcss/vite';import { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';export default defineConfig({ plugins: [sveltekit(), tailwindcss()]});
package.json
{"private": true,"version": "0.0.1","type": "module","scripts": {"dev": "vite dev","build": "vite build","preview": "vite preview","prepare": "svelte-kit sync || echo ''","check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","format": "prettier --write .","lint": "prettier --check . && eslint ." },"devDependencies": {"@eslint/compat": "^1.2.5","@eslint/js": "^9.18.0","@sveltejs/adapter-vercel": "^1.0.0-next.88","@sveltejs/kit": "^2.16.0","@sveltejs/vite-plugin-svelte": "^5.0.0","@tailwindcss/vite": "^4.0.0","eslint": "^9.18.0","eslint-config-prettier": "^10.0.1","eslint-plugin-svelte": "^2.46.1","globals": "^15.14.0","prettier": "^3.4.2","prettier-plugin-svelte": "^3.3.3","prettier-plugin-tailwindcss": "^0.6.11","svelte": "^5.0.0","svelte-check": "^4.0.0","tailwindcss": "^4.0.0","typescript": "^5.0.0","typescript-eslint": "^8.20.0","vite": "^6.0.0" }}