Tailwind v4 @source directive ignores subdirectories with .gitignore
Problem
What version of Tailwind CSS are you using? v4.0.0-beta.8 What build tool (or framework if it abstracts the build tool) are you using? None, using CLI What version of Node.js are you using? v20.18.1 What browser are you using? N/A What operating system are you using? tested on macOS and Linux Reproduction URL https://github.com/jhh/tailwind-gitignore Describe your issue Adding a .gitignore file to a directory referenced by a @source directive in a Tailwind CSS source file causes the referenced directory to be ignored. I discovered this because the uv Python packaging tool creates a `.gitignore` in the `.venv` directory it uses and I couldn't `@source` a template directory within it. Manually deleting `.venv/.gitigore` fixes the issue.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Modify .gitignore to Allow Tailwind @source Directive
The Tailwind CSS @source directive is designed to include files from specified directories. However, when a .gitignore file is present in a directory, it can cause Tailwind to ignore the entire directory, including its subdirectories. This behavior is particularly problematic when using tools like uv that automatically generate .gitignore files in virtual environments, as it prevents Tailwind from accessing necessary template files.
Awaiting Verification
Be the first to verify this fix
- 1
Identify the .gitignore file location
Locate the .gitignore file in the directory that contains the templates you want to include with the @source directive. This is typically found in the root of your project or within specific subdirectories.
bashls -a .venv - 2
Edit the .gitignore file
Open the .gitignore file in a text editor and modify it to exclude only the files or directories that should be ignored. Ensure that the specific template directory you want to include with the @source directive is not listed.
bashnano .venv/.gitignore - 3
Add specific exceptions to .gitignore
If you need to keep the .gitignore file, add exceptions for the specific directories or files you want Tailwind to recognize. Use the '!' character to negate the ignore rule for the template directory.
bash!/path/to/template-directory/* - 4
Test the @source directive
After modifying the .gitignore file, run your Tailwind build process again to check if the @source directive now correctly includes the desired templates. Look for any errors or warnings related to the templates.
bashtailwindcss build styles.css -o output.css
Validation
Confirm that the Tailwind build process completes without errors related to the @source directive. Check the output CSS file to ensure that the styles from the specified template directory are included.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep