Build error - Parsing css source code failed

[lostish]

I am using tailwind 4 (migrating from tailwind 3 to 4) shadcn and nextjs 15 with bun.

After migrating to tailwind 4 without any problem, I ran bun run dev and the terminal output showed me this:

╭─[~/projects/arty]─[lost@Kokoro]─[0]─[446]
╰─[:)] % bun run dev            
$ next dev --turbopack
Using existing cloned repo
⠹   ▲ Next.js 15.1.6 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.18.17:3000
   - Environments: .env
   - Experiments (use with caution):
     · turbo
     · authInterrupts

 ✓ Starting...
ℹ [paraglide] Compiling inlang project at "./project.inlang".
Using existing cloned repo
 ✓ Compiled in 3.9s
 ✓ Ready in 4.6s
[auth][warn][debug-enabled] Read more: https://warnings.authjs.dev#debug-enabled
 ○ Compiling / ...
 ✓ Compiled / in 1405ms
 ⨯ ./projects/arty/src/app/globals.css:664:22
Parsing css source code failed
  662 |       max-width: none;
  663 |     }
> 664 |     @media (width >= 100%) {
      |                      ^
  665 |       max-width: 100%;
  666 |       padding-inline: 2rem;
  667 |     }

Unexpected token Percentage { has_sign: false, unit_value: 1.0, int_value: Some(100) } at [project]/projects/arty/src/app/globals.css:663:21


 ✓ Compiled /_error in 210ms
 GET / 500 in 1754ms

I don't understand what point in my code generates this problem or if it is unrelated to my code.

As a bonus, I can do the build of the project without any problem.

╭─[~/projects/arty]─[lost@Kokoro]─[0]─[447]
╰─[:)] % bun run build
$ next build
ℹ [paraglide] Compiling inlang project at "./project.inlang".
Using existing cloned repo
ℹ [paraglide] Successfully compiled the project.
ℹ [paraglide] Compiling inlang project at "./project.inlang".
Using existing cloned repo
ℹ [paraglide] Successfully compiled the project.
   ▲ Next.js 15.1.6
   - Environments: .env
   - Experiments (use with caution):
     · turbo
     · authInterrupts

   Creating an optimized production build ...

 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (19/19)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                                Size     First Load JS
┌ ƒ /                                      732 B           123 kB
├ ƒ /_not-found                            189 B           106 kB
├ ƒ /account                               189 B           106 kB
├ ƒ /api/auth/[...next-auth]               189 B           106 kB
├ ƒ /api/auth/dashboard/services           189 B           106 kB
├ ƒ /api/auth/dashboard/services/[nameId]  189 B           106 kB
├ ƒ /api/auth/dashboard/works              189 B           106 kB
├ ƒ /api/auth/dashboard/works/[nameId]     189 B           106 kB
├ ƒ /api/auth/sign-up                      189 B           106 kB
├ ƒ /api/clients                           189 B           106 kB
├ ƒ /api/services                          189 B           106 kB
├ ƒ /api/services/[nameId]                 189 B           106 kB
├ ƒ /api/works                             189 B           106 kB
├ ƒ /dashboard                             189 B           106 kB
├ ƒ /portfolio                             1.24 kB         128 kB
├ ƒ /portfolio/[nameId]                    189 B           106 kB
├ ○ /robots.txt                            0 B                0 B
├ ƒ /services                              1.88 kB         120 kB
├ ƒ /services/[category]                   189 B           106 kB
├ ƒ /sign-in                               1.12 kB         130 kB
├ ƒ /sign-up                               3.92 kB         146 kB
├ ○ /sitemap.xml                           0 B                0 B
└ ƒ /terms-and-conditions                  189 B           106 kB
+ First Load JS shared by all              106 kB
  ├ chunks/1517-be608b2316b09286.js        50.6 kB
  ├ chunks/4bd1b696-ccfc06d2b203e8d0.js    53 kB
  └ other shared chunks (total)            2.05 kB


ƒ Middleware                               193 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

I would appreciate your help!!!

[wongjn]

Do you perhaps have something like:

@theme {
  …
  --breakpoint-<something>: 100%;
  …
}

(Where <something> is some sort of key name) in your CSS somewhere? If so, this doesn't seem invalid and I don't think it makes sense.

Otherwise, consider providing an project that reproduces the error please.

[lostish]

I have been using the @config to my tailwind configuration file, I have tried moving my breakpoints as you mentioned and the problem still persists.

I also checked parts of my code for an error and I haven't seen anything problematic.

But I seem to have a problem with the container configuration. Although I am trying to move (tailwind.config.ts -> globals.css) and change my configuration I still get the same strange error (in all paths).

 ✓ Compiled / in 1428ms
 ⨯ ./projects/arty/src/app/globals.css:625:22
Parsing css source code failed
  623 |   .container {
  624 |     width: 100%;
> 625 |     @media (width >= 100%) {
      |                      ^
  626 |       max-width: 100%;
  627 |     }
  628 |     @media (width >= 40rem) {

Unexpected token Percentage { has_sign: false, unit_value: 1.0, int_value: Some(100) } at [project]/projects/arty/src/app/globals.css:624:21

I will try things and if I don't get anything I will see if I can recreate the bug in another demo project of this one.

[Shahid-Bagwan]

i am also trying to migrate and having issues

[lostish]

i am also trying to migrate and having issues

Hello Shahid-Bagwan,

if you were planning to migrate and you had a problem similar to this, I suggest you be careful. As this problem I have not been able to fix it even though I reinstalled tailwind and its deps.

What worked for me:

Create another project with tailwind 4 (or migrate it with your configuration) and the framework you use and test if the errors are gone (in case any class that generated conflict, test that the class values are no longer out of place or just disappeared its conflict). Then add the parts of your functional project to this one and it should work ! in my case I had to do this because it detected that I had implemented a media query that was breaking my app.

 ✓ Compiled / in 1428ms
 ⨯ ./projects/arty/src/app/globals.css:625:22
Parsing css source code failed
  623 |   .container {
  624 |     width: 100%;
> 625 |     @media (width >= 100%) {
      |                      ^
  626 |       max-width: 100%;
  627 |     }
  628 |     @media (width >= 40rem) {

Unexpected token Percentage { has_sign: false, unit_value: 1.0, int_value: Some(100) } at [project]/projects/arty/src/app/globals.css:624:21 

After doing the migration everything was fixed correctly and this is how the tailwind container class looked like.

.container {
    width: 100%;
    @media (width >= 40rem /* 640px */) {
        max-width: 40rem /* 640px */;
    }
    @media (width >= 48rem /* 768px */) {
        max-width: 48rem /* 768px */;
    }
    @media (width >= 64rem /* 1024px */) {
        max-width: 64rem /* 1024px */;
    }
    @media (width >= 80rem /* 1280px */) {
        max-width: 80rem /* 1280px */;
    }
    @media (width >= 96rem /* 1536px */) {
        max-width: 96rem /* 1536px */;
    }
}

I hope this can help you! It may be a little “strange”, but it is the only way to fix this kind of conflict in my case.

[kaurkaelep]

For me this error stemmed from having a screen size set to '100%' in the 'screens' property in tailwind.config.ts.

Remove all breakpoint sizes that resolve to '100%'
screens: { ...screens, /* xxxs: '100%', xxs: '100%', */ }