reactjstailwind-cssparceltailwind-css-4

Unexpected token CloseSquareBracket error with TailwindCSS v4 and Parcel

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.

Solution

  • Update 2025-03-28

    From TailwindCSS v4.0.18 or above among the many fixes introduced in PR #17255, node_modules is now excluded from detection by default.

    • Ignore node_modules by default (but can be overridden by @source not … rules) (#17255)

    Source: TailwindCSS v4 Changelog

    All the default rules for auto source detection.

    This includes:

    • Ignoring common content directories like .git and node_modules
    • Ignoring file extensions we definitely don't want to include like .css and .scss
    • Ignoring common binary file extensions like .png and .jpg
    • Ignoring common files like yarn.lock and package-lock.json

    Source: Disabled paths by default from v4.0.18 - GitHub

    So, the default solution is provided for the error mentioned in the question. Nevertheless, it's useful to understand the principles behind how TailwindCSS v4 automatic source detection works:

    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.

    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.

    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

    How to can exclude path from source detection?

    Solution #1: exclude the node_modules using the .gitignore (recommended)

    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.

    Solution #2 from TailwindCSS v4.0.18 or above @source not ...

    I generally don't recommend using @source not to block node_modules, as .gitignore is a much better option for that.

    However, if you want to exclude a path from TailwindCSS but not from your Git repository, as of v4.0.18 (introduced in PR #17255), you can use @source not "..."; to exclude a specific relative path from TailwindCSS automatic source detection.

    @import "tailwindcss";

@source not "../src/my-tailwind-js-plugin.js"; /* exclude */