Replies: 6 comments 11 replies
-
|
Does a build fail locally as well? If so, would you be able to provide a git repository that reproduces the issue please? |
Beta Was this translation helpful? Give feedback.
-
|
Its not failing locally, just on vercel. My repo is private but I invited you for access. |
Beta Was this translation helpful? Give feedback.
-
|
I'm also getting this error when ran locally. If i remove @import 'tailwindcss';
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
:root {
--background: hsl(0 0% 100%);
--foreground: hsl(240 10% 3.9%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(240 10% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(240 10% 3.9%);
--primary: hsl(240 5.9% 10%);
--primary-foreground: hsl(0 0% 98%);
--secondary: hsl(240 4.8% 95.9%);
--secondary-foreground: hsl(240 5.9% 10%);
--muted: hsl(240 4.8% 95.9%);
--muted-foreground: hsl(240 3.8% 46.1%);
--accent: hsl(240 4.8% 95.9%);
--accent-foreground: hsl(240 5.9% 10%);
--destructive: hsl(0 72.22% 50.59%);
--destructive-foreground: hsl(0 0% 98%);
--border: hsl(240 5.9% 90%);
--input: hsl(240 5.9% 90%);
--ring: hsl(240 5% 64.9%);
--radius: 0.4rem;
--success: hsl(148.24 73.91% 36.08%);
--info: hsl(212.31 87.39% 53.33%);
--warning: hsl(6.92 87.39% 53.33%);
--error: hsl(348 62.99% 50.2%);
--sidebar-background: hsl(0 0% 98%);
--sidebar-foreground: hsl(240 5.3% 26.1%);
--sidebar-primary: hsl(240 5.9% 10%);
--sidebar-primary-foreground: hsl(0 0% 98%);
--sidebar-accent: hsl(240 4.8% 95.9%);
--sidebar-accent-foreground: hsl(240 5.9% 10%);
--sidebar-border: hsl(220 13% 91%);
--sidebar-ring: hsl(240 5% 64.9%);
}
.dark {
--background: hsl(240 10% 3.9%);
--foreground: hsl(0 0% 98%);
--card: hsl(240 10% 3.9%);
--card-foreground: hsl(0 0% 98%);
--popover: hsl(240 10% 3.9%);
--popover-foreground: hsl(0 0% 98%);
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(240 5.9% 10%);
--secondary: hsl(240 3.7% 15.9%);
--secondary-foreground: hsl(0 0% 98%);
--muted: hsl(240 3.7% 15.9%);
--muted-foreground: hsl(240 5% 64.9%);
--accent: hsl(240 3.7% 15.9%);
--accent-foreground: hsl(0 0% 98%);
--destructive: hsl(0 62.8% 30.6%);
--destructive-foreground: hsl(0 85.7% 97.3%);
--border: hsl(240 3.7% 15.9%);
--input: hsl(240 3.7% 15.9%);
--ring: hsl(240 4.9% 83.9%);
--success: hsl(159.69 68.65% 63.73%);
--info: hsl(200 72.29% 67.45%);
--warning: hsl(38.97 81.82% 71.96%);
--error: hsl(0 69.33% 70.59%);
--sidebar-background: hsl(240 5.9% 10%);
--sidebar-foreground: hsl(240 4.8% 95.9%);
--sidebar-primary: hsl(224.3 76.3% 48%);
--sidebar-primary-foreground: hsl(0 0% 100%);
--sidebar-accent: hsl(240 3.7% 15.9%);
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
--sidebar-border: hsl(240 3.7% 15.9%);
--sidebar-ring: hsl(240 4.9% 83.9%);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-success: var(--success);
--color-info: var(--info);
--color-warning: var(--warning);
--color-error: var(--error);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar-background);
--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
}
@layer base {
* {
@apply border-border;
}
html {
@apply scroll-smooth;
}
body {
@apply bg-background text-foreground overscroll-none;
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
}
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
[data-wrapper] {
@apply min-[1800px]:border-t;
}
}
/* Custom scrollbar styling. Thanks @pranathiperii. */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 5px;
}
* {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
}
}
@layer utilities {
.step {
counter-increment: step;
}
.step:before {
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
@apply ml-[-50px] mt-[-4px];
content: counter(step);
}
.chunk-container {
@apply shadow-none;
}
.chunk-container::after {
content: "";
@apply absolute -inset-4 shadow-xl rounded-xl border;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.border-grid {
@apply border-border/30 dark:border-border;
}
.container-wrapper {
@apply min-[1800px]:max-w-[1536px] min-[1800px]:border-x border-border/30 dark:border-border mx-auto w-full;
}
.container {
@apply px-4 xl:px-6 2xl:px-4 mx-auto max-w-[1536px];
}
}import type { NextConfig } from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
import withSerwistInit from '@serwist/next';
const withNextIntl = createNextIntlPlugin();
const withSerwist = withSerwistInit({
swSrc: 'src/sw.ts',
swDest: 'public/sw.js',
disable: process.env.NODE_ENV === "development",
});
const nextConfig: NextConfig = {
webpack: (config, options) => {
return config;
},
images: {
formats: ['image/avif', 'image/webp'],
},
typescript: {
ignoreBuildErrors: true,
},
reactStrictMode: false,
compress: true,
poweredByHeader: false,
experimental: {
serverSourceMaps: false,
webpackMemoryOptimizations: true
},
}; |
Beta Was this translation helpful? Give feedback.
-
I gave you access to my private repo |
Beta Was this translation helpful? Give feedback.
-
|
Indeed, though I couldn't reproduce the error locally, just like you said that you weren't able to either. I'd need a repo that can produce the error locally for debugging. |
Beta Was this translation helpful? Give feedback.
-
The issue only happens on Vercel. What can I do about it? |
Beta Was this translation helpful? Give feedback.
-
|
Im currently unable to create a repository for it, but @nahasco can you do this in your postcss.config.mjs: /** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {
optimize: {
minify: false
}
},
},
};
export default config;it ends up building for me when i do this |
Beta Was this translation helpful? Give feedback.
-
Yes this makes the build go through thanks. But I dont think it is a permanent solution. I wonder why minifying the css is crashing only in vercel. |
Beta Was this translation helpful? Give feedback.
-
|
I am seeing the exact same thing when upgrading to v4 and trying to deploy on docker. It builds just fine locally, but on docker it fails with this error. steps to reproduce:
|
Beta Was this translation helpful? Give feedback.
-
|
Can confirm that the below fixes the issue
|
Beta Was this translation helpful? Give feedback.
-
|
Just got the same error locally, running an 2025-02-25T23_11_35_795Z-debug-0.log |
Beta Was this translation helpful? Give feedback.
-
|
same here :( |
Beta Was this translation helpful? Give feedback.
-
|
Experiencing the same after updating from version Reverting back to Not sure how to debug this |
Beta Was this translation helpful? Give feedback.
-
|
Resolved this by adding a I think via #17092 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@colinwilson How did you get this to work on Vercel? I have another project running v4.03 (TailwindCSS) that deploys with zero issues on Vercel. Seems to not be working at all on v4.0.9 for me. Just wanted to see if you made any changes to any of the config files. |
Beta Was this translation helpful? Give feedback.
-
|
@alex-x-x-x-x I ended up not making any config changes. Although, going from tailwindcss I think placing the I went over the tailwindcss changelogs, but honestly couldn't figure out what changes triggered this error in the first place. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
@import "tailwindcss";is casuing the build of my Nextjs app to fail.After removing and adding blocks for hours it turns out the crash is caused by
@import "tailwindcss";I followed the docs to upgrade so I have no ideas whats the cause of this.
Been trying to fix this for hours, I appreciate any help.
Beta Was this translation helpful? Give feedback.
All reactions