Protocol: CSS is broken

[sbbu]

What component (if applicable)

• URL for category: https://tailwindui.com/templates/protocol
• Component name: Protocol

Describe the bug
On a fresh install of the template, there appears to be no CSS for protocol-ts.

To Reproduce
Steps to reproduce the behavior:

1. Download the zip
2. Go into protocol-ts
3. npm install
4. npm run dev
5. Open localhost:3000

Expected behavior
I expect the page to look like the screenshots and the live preview on the Tailwind UI site.

Screenshots

Browser/Device (if applicable)

• OS: MacOS
• Browser: Zen (Firefox), tried Arc as well
• Version 1.7.5b

[adamwathan]

Hey! I can't seem to reproduce this, just cloned the whole thing down and ran the same steps and this is what I get:

Are there any errors in the terminal or the browser console or anything like that that could give us a clue as to what's going wrong? Having a hard time thinking what the issue would be here 🤔

Do you mind zipping up your copy of the project after everything was installed and emailing to us at [email protected] so we can take a look?

[sbbu]

Are there any errors in the terminal or the browser console or anything like that that could give us a clue as to what's going wrong? Having a hard time thinking what the issue would be here 🤔

Nope, I don't see anything out of the ordinary in the browser or server logs, or the network tab. I will send you my zip

[reinink]

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 Protocol template 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? 🙏

[reinink]

Hey! Just following up on this issue. I've just updated all the Tailwind UI templates to include an empty .git folder in the ZIP download, and I also updated all the templates to Tailwind CSS v4.0.6 (the latest version). This should fix the issue for you, and should also prevent anyone in the future from bumping into this.

Going to close this issue since this should resolve things for you, but please let us know if you have any further trouble!

Thanks for bringing this to our attention! 🤙