The Spotlight template doesn't appear to render correctly following the `README.md` instructions

[mihaiconstantin]

This issue concerns the Spotlight template.

Describe the bug

I can't get the template to display correctly after following the instructions in the README.md file.

To Reproduce

tailwindui-spotlight.mp4

Expected behavior

The template to render correctly.

Setup information

• macOS: 15.3 (24D60)
• Chrome: Version 132.0.6834.159 (Official Build) (arm64)
• Node: v22.13.1

[reinink]

Hey! Happy to help out here.

So, I think you're bumping into an issue with the automatic content detection in Tailwind CSS v4.0 (see tailwindlabs/tailwindcss#15941). This has been fixed, so start by updating to the latest version of Tailwind CSS (version 4.0.3):

npm install tailwindcss@latest

That said, you might still run into issues. The way that the automatic content detection works is by scanning the current repository for a .gitignore file, and if one exists it automatically omits those files when looking for Tailwind utility classes.

However, if you aren't in an initialized Git repo, Tailwind automatically scans all parent directories for .gitignore files, because without the Git repo we don't know the root directory of the project. When this happens, if you happen to have a .gitignore file somewhere on your system (for example in your home directory) that ignores files (ie. *), then Tailwind will also ignore those files.

The simple solution in this case is to just run git init in your project and that will scope Tailwind's automatic content detection to that project.

I suspect that might be part of the problem here, as when you follow the steps in the template's README there is no Git repo initialized.

Mind giving those two steps a try and see if it fixes the issue for you? 🙏

[mihaiconstantin]

Thanks a lot for taking a look at this! I tried what you suggested, and still no luck. I'm attaching the clip here in case it helps.

tailwind-ui-template-spotlight.mp4

It is true that I have a git repository in my home directory, and that Downloads in within that home directory. However, this has never been an issue before (i.e., and after the git init the current directory is recognized as the project root). Just in case, I'll try to move the template folder to another directory.

[mihaiconstantin]

Okay, I moved the template:

• from: /Users/username/Downloads/tailwindui-spotlight/spotlight-ts
• to: /Users/Shared/tailwindui-spotlight/spotlight-ts

and the template loads correctly!

So, it looks like it's a problem generated by my setup. Apologies for this.

Just for the sake of clarity, my /Users/username folder contains a .git repository that tracks specific things, while ignoring everything else. I suspect the issue is with how the .gitignore in this directory is specified. In any case, it contains:

# /Users/username/.gitignore

# Ignore everything.
*

# But not these files.
!README.md
!.gitignore
!.gitconfig
!.Rprofile
!.zprofile
!.zshrc
!.tmux.conf

!.scripts/
!.scripts/**

# ...

I am not sure how the automatic content detection in Tailwind CSS v4.0 works, but adding

!/Downloads/tailwindui-spotlight/spotlight-ts/
!/Downloads/tailwindui-spotlight/spotlight-ts/**

to the .gitignore file results in the template rendering correctly.

[reinink]

Glad you got it figured out!

Just to confirm, when you ran git init on the spotlight-ts, and then re-ran the build process, the problem persisted? And you made sure to upgrade to Tailwind CSS v4.0.3?

[mihaiconstantin]

Just to confirm, when you ran git init on the spotlight-ts, and then re-ran the build process, the problem persisted? And you made sure to upgrade to Tailwind CSS v4.0.3?

Indeed, the problem persisted (i.e., as seen in the video above). I had to move the template outside the Users/username/Downloads/ to get it to work because there was another .git repository in the Users/username/.

[mihaiconstantin]

Shall I go ahead and close this, or would you like to investigate further? Thanks a lot, by the way!

[reinink]

Hey yeah, I think I'll close this issue for now since you've got things figured out. However, we'll probably do some more digging internally on this.

Cheers! 🤙