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!
Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/11479
`
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!