Unexpected token CloseSquareBracket error with TailwindCSS v4 and Parcel

Question

I followed all the steps mentioned in the Tailwind v4 docs, to setup TailwindCSS v4 with parcel . After setup when i am running local server then i got this error.

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-css: Unexpected token CloseSquareBracket

C:\Users\vatsh\OneDrive\Desktop\study\coding\4\src\index.css:1781:11            
    > 1780 |   .\[host\:\]port\] {
    > 1781 |     host: ]port;
           |           ^
      1782 |   }
      1783 |   .\[keywords\:node-addon-api\] { 

I am clueless because it is showing error in tailwind inbuilt file code (index.css) which I can't edit.

index.css file contains only this:

@import "tailwindcss";

It's happening only in TailwindCSS v4. Please help me to resolve this error.

Answer 1

Solution: exclude the node_modules using the .gitignore

I've just tried it out. Tailwind's automatic source detection will scan node_modules and find these invalid class-candidate look-alikes in the node-addon-api npm package and then ends up building some invalid CSS, causing the error.

You can work around this by adding a .gitignore to the root of the project that ignores node_modules.

• tailwindlabs/tailwindcss #15777: TailwindCSS v4 with parcel installation method is broken

Automatic Source Detection from TailwindCSS v4

For the TailwindCSS v4 engine, we do not need to specify the sources we use. It automatically finds them. However, it may also search in the node_modules folder, where it can "incorrectly" detect classes that it assumes we are using. This is how unused classes can end up in the output.

• How classes are detected - TailwindCSS v4 Docs
• Which files are scanned - TailwindCSS v4 Docs

The detection, however, takes into account the rules listed in the .gitignore file and ignores the paths that are blocked there. Therefore, it is always a good idea to create a .gitignore and block node_modules in it:

/node_modules/

But you can still specify individual sources using the @source directive.

• Setting your base path: @import "tailwindcss" source("../src"); - TailwindCSS v4 Docs
• Disable automatic detection: @import "tailwindcss" source(none); - TailwindCSS v4 Docs

Which files are scanned

Tailwind will scan every file in your project for class names, except in the following cases:

• Files that are in your .gitignore file
• Binary files like images, videos, or zip files
• CSS files
• Common package manager lock files