TailwindCSS custom classes not working on Vercel

[fdarkaou]

Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/11479

^{Originally posted by **fdarkaou** June 23, 2023} Hi everyone, My custom Tailwindclasses and gradients are not being shown when deploying on Vercel, while they work perfectly on localhost (both dev and production). I am using Nuxt 2 with the latest TailwindCSS (3.3.2) being installed as a plugin. This is how my nuxt.config.js looks like: `css: ['~/assets/css/tailwind.css']` `build: { postcss: { plugins: [ 'tailwindcss', 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009', }, stage: 3, features: { 'custom-properties': false, }, }, ], ], } }` tailwind.config.js: `/** @type {import('tailwindcss').Config} */` `module.exports = { content: [ './components/**/*.{vue,js}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './assets/**/*.{vue,js}', './assets/css/*.css' ], safelist: ['text-gradient-warm', 'btn-gradient', 'btn-gradient:hover', 'bg-gradient-to-r', 'from-[#44BCFF]', 'via-[#FF44EC]', 'to-[#FF675E]'], theme: { extend: { colors: { 'blue-custom': '#44BCFF', 'pink-custom': '#FF44EC', 'orange-custom': '#FF675E' } } }, plugins: [ require('daisyui'), ], daisyui: { styled: true, themes: ["light"], }, } ` I have tried so many things but it just does not seem to work. I have also tried all solutions for similar problems I have found online but does not seem to be doing anything. Most text-gradients do not work, and most importantly, some gradient backgrounds on button do not work. For example: `

`

Shows a nice gradient shadow underneath my button but it shows nothing once deployed on Vercel.

Would really appreciate any help on this as I have been stuck on it for days!

[adamwathan]

Closing in favor of the original discussion 👍