0

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.

Improve this question
0

1 Answer 1

Reset to default
3

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 anyway)

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.

Important Note: Starting from v4.0.18 on 2025-03-28, automatic source detection ignores node_modules automatically, regardless of .gitignore. See my answer at the top.

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. (See my answer at the top.)

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 */
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

but i am running my project on development mode in my local machine. '.gitignore' doing nothing in this case
TailwindCSS uses automatic source detection and excludes the paths within it from its own mapping mechanism. See: Which files are scanned; and, this is a slightly different type of answer, but in the middle, I explained how the automatic source detection works, its disabling, etc.: Unused classes and variables are included in the native CSS output of Tailwind
Seeing that the usage of gitignore indeed requires explanation, I have also outlined here how the automatic source detection works in v4. In the end, you're right. At first, using gitignore might seem like nonsense. However, from the opposite perspective, node_modules is typically excluded in 99% of gitignore files (assuming you use version control for every project), so it made sense for TailwindCSS to utilize this file.
yes, I tried it again. now it worked, thanks for your efforts to resolve my query.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.