Error: "Parsing css source code failed" in Tailwind V3

[NishargShah]

What version of Tailwind CSS are you using?

TailwindCSS: v3.4.17

What build tool (or framework if it abstracts the build tool) are you using?

Nextjs: 15.4.5
React: 19.1.0

What version of Node.js are you using?

NodeJS: 22

What browser are you using?

Browser: Chrome

What operating system are you using?

OS: macOS

Reproduction URL

https://github.com/NishargShah/tailwindcss-v3-issue

Describe your issue

Hi Tailwind team,

I’m working on a client project where I had to change padding values for large screens (min-width: 1728px) using a custom plugin in tailwind.config.ts.

Everything was working fine until I used the --turbopack flag in the dev script.

After many hours of debugging, I found a specific issue that causes the development server to break. I also created a minimal repo to reproduce the bug.

---

🧩 What I Did

1. In my tailwind.config.ts, I added a plugin to support custom padding values.

2. In page.tsx at 7th line I used the class !pt-1.25.

   Please take a note, it only reproduce when important (!) is there, without important it will work as aspected.

3. Then I ran this command to generate CSS:

   npx tailwindcss -i ./src/styles/globals.css -o ./src/styles/output.css

4. When I start the Next.js dev server with --turbopack:

   next dev --turbopack

   I get a Next.js error screen, and the server fails to load the app.

5. But if I remove !pt-1.25, everything works perfectly.

6. Also, if I run the dev server without --turbopack, it works fine.

---

📸 Screenshots

Error in CSS File:

Error from dev server:

---

🔍 What I Tried

• I thought it might be a PostCSS issue, but not sure.
• After testing multiple cases, the main issue is with custom value 1.25 and --turbopack in dev mode.
• This issue does not happen in production builds, only during dev with --turbopack.

---

✅ Temporary Workaround

If I remove the --turbopack flag from the script, like this:

next dev

…it works fine. But I prefer to use --turbopack for better speed.

---

📦 Possible Cause?

It might be that:

• 1.25 is not being processed correctly in some part of the pipeline (maybe PostCSS or internal Tailwind logic).
• Or maybe --turbopack in Next.js is strict and crashes when there CSS syntax error.

---

Please check if:

• This is a Tailwind bug or something from Next.js Turbo integration.
• Any workaround/fix is possible for supporting custom values like 1.25.

Thanks a lot for your great work and support 🙌

[wongjn]

Seems like Tailwind is getting confused with your class names in your plugin matching the candidate class names that would be generated. As a work around to get well-formed CSS, you could use attribute selectors instead:

--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -33,27 +33,27 @@ const config = {
         const spacingValue = `calc(var(--fluid-spacing) * ${multiplier})`
 
         // Padding
-        largerFluidUtilities[`.p-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="p-${escapedSize}"]`] = {
           padding: `${spacingValue} !important`,
         }
-        largerFluidUtilities[`.px-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="px-${escapedSize}"]`] = {
           'padding-left': `${spacingValue} !important`,
           'padding-right': `${spacingValue} !important`,
         }
-        largerFluidUtilities[`.py-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="py-${escapedSize}"]`] = {
           'padding-top': `${spacingValue} !important`,
           'padding-bottom': `${spacingValue} !important`,
         }
-        largerFluidUtilities[`.pt-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="pt-${escapedSize}"]`] = {
           'padding-top': `${spacingValue} !important`,
         }
-        largerFluidUtilities[`.pr-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="pr-${escapedSize}"]`] = {
           'padding-right': `${spacingValue} !important`,
         }
-        largerFluidUtilities[`.pb-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="pb-${escapedSize}"]`] = {
           'padding-bottom': `${spacingValue} !important`,
         }
-        largerFluidUtilities[`.pl-${escapedSize}`] = {
+        largerFluidUtilities[`[class~="pl-${escapedSize}"]`] = {
           'padding-left': `${spacingValue} !important`,
         }
       }

Which should give you a better CSS result like:

Result

--- a/src/styles/output.css
+++ b/src/styles/output.css
@@ -555,161 +550,128 @@ video {
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
 
-[hidden]:where(:not([hidden='until-found'])) {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
 @media (min-width: 1728px) {
-  .p-0 {
+  [class~="p-0"] {
     padding: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .px-0 {
+  [class~="px-0"] {
     padding-left: calc(var(--fluid-spacing) * 0) !important;
     padding-right: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .py-0 {
+  [class~="py-0"] {
     padding-top: calc(var(--fluid-spacing) * 0) !important;
     padding-bottom: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .pt-0 {
+  [class~="pt-0"] {
     padding-top: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .pr-0 {
+  [class~="pr-0"] {
     padding-right: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .pb-0 {
+  [class~="pb-0"] {
     padding-bottom: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .pl-0 {
+  [class~="pl-0"] {
     padding-left: calc(var(--fluid-spacing) * 0) !important;
   }
 
-  .p-1 {
+  [class~="p-1"] {
     padding: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .px-1 {
+  [class~="px-1"] {
     padding-left: calc(var(--fluid-spacing) * 0.25) !important;
     padding-right: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .py-1 {
+  [class~="py-1"] {
     padding-top: calc(var(--fluid-spacing) * 0.25) !important;
     padding-bottom: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .pt-1 {
+  [class~="pt-1"] {
     padding-top: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .pr-1 {
+  [class~="pr-1"] {
     padding-right: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .pb-1 {
+  [class~="pb-1"] {
     padding-bottom: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .pl-1 {
+  [class~="pl-1"] {
     padding-left: calc(var(--fluid-spacing) * 0.25) !important;
   }
 
-  .p-0\.5 {
+  [class~="p-0\.5"] {
     padding: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .px-0\.5 {
+  [class~="px-0\.5"] {
     padding-left: calc(var(--fluid-spacing) * 0.125) !important;
     padding-right: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .py-0\.5 {
+  [class~="py-0\.5"] {
     padding-top: calc(var(--fluid-spacing) * 0.125) !important;
     padding-bottom: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .pt-0\.5 {
+  [class~="pt-0\.5"] {
     padding-top: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .pr-0\.5 {
+  [class~="pr-0\.5"] {
     padding-right: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .pb-0\.5 {
+  [class~="pb-0\.5"] {
     padding-bottom: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .pl-0\.5 {
+  [class~="pl-0\.5"] {
     padding-left: calc(var(--fluid-spacing) * 0.125) !important;
   }
 
-  .p-1\.25 {
+  [class~="p-1\.25"] {
     padding: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 
-  .px-1\.25 {
+  [class~="px-1\.25"] {
     padding-left: calc(var(--fluid-spacing) * 0.3125) !important;
     padding-right: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 
-  .py-1\.25 {
+  [class~="py-1\.25"] {
     padding-top: calc(var(--fluid-spacing) * 0.3125) !important;
     padding-bottom: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 
-  .pt-1\.25 {
+  [class~="pt-1\.25"] {
     padding-top: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 
-  .pr-1\.25 {
+  [class~="pr-1\.25"] {
     padding-right: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 
-  .pb-1\.25 {
+  [class~="pb-1\.25"] {
     padding-bottom: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 
-  .pl-1\.25 {
-    padding-left: calc(var(--fluid-spacing) * 0.3125) !important;
-  }
-
-   {
-    padding: calc(var(--fluid-spacing) * 0) !important;
-    padding-top: calc(var(--fluid-spacing) * 0) !important;
-    padding-right: calc(var(--fluid-spacing) * 0) !important;
-    padding-bottom: calc(var(--fluid-spacing) * 0) !important;
-    padding-left: calc(var(--fluid-spacing) * 0) !important;
-    padding: calc(var(--fluid-spacing) * 0.25) !important;
-    padding-top: calc(var(--fluid-spacing) * 0.25) !important;
-    padding-right: calc(var(--fluid-spacing) * 0.25) !important;
-    padding-bottom: calc(var(--fluid-spacing) * 0.25) !important;
-    padding-left: calc(var(--fluid-spacing) * 0.25) !important;
-    padding: calc(var(--fluid-spacing) * 0.125) !important;
-    padding-top: calc(var(--fluid-spacing) * 0.125) !important;
-    padding-right: calc(var(--fluid-spacing) * 0.125) !important;
-    padding-bottom: calc(var(--fluid-spacing) * 0.125) !important;
-    padding-left: calc(var(--fluid-spacing) * 0.125) !important;
-    padding: calc(var(--fluid-spacing) * 0.3125) !important;
-    padding-left: calc(var(--fluid-spacing) * 0.3125) !important;
-    padding-right: calc(var(--fluid-spacing) * 0.3125) !important;
-    padding-top: calc(var(--fluid-spacing) * 0.3125) !important;
-    padding-bottom: calc(var(--fluid-spacing) * 0.3125) !important;
-  }
-
-  .\!pt-1\.25 {
-    padding-top: calc(var(--fluid-spacing) * 0.3125) !important;
-  }
-
-   {
-    padding-right: calc(var(--fluid-spacing) * 0.3125) !important;
-    padding-bottom: calc(var(--fluid-spacing) * 0.3125) !important;
+  [class~="pl-1\.25"] {
     padding-left: calc(var(--fluid-spacing) * 0.3125) !important;
   }
 }

[NishargShah]

It worked, thanks a lot but its workaround, please close it after resolving the bug.

[thecrypticace]

minimal repro:

@tailwind base;

export default {
  content: [{ raw: '!a' },],
  plugins: [
    ({ addBase }) => addBase({
      '@media (min-width: 1728px)': {
        '.a': { 'padding-top': '1rem !important' },
        '.b': { 'padding-right': '1rem !important' },
      }
    }),
  ],
}

npx tailwindcss -i src/styles/globals.css -o out.css

[NishargShah]

It worked, thanks a lot but its workaround, please close it after resolving the bug.

I am getting specificity issues, so this workaround is not working

[thecrypticace]

Will be fixed once v3.4.18 is out.

[NishargShah]

Great Work, thanks :)