tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.28k stars 4.22k forks source link

Improve multi-root `@config` linking #15001

Closed RobinMalfait closed 4 days ago

RobinMalfait commented 1 week ago

This PR improves the discoverability of Tailwind config files when we are trying to link them to your CSS files.

When you have multiple "root" CSS files in your project, and if they don't include an @config directive, then we tried to find the Tailwind config file in your current working directory.

This means that if you run the upgrade command from the root of your project, and you have a nested folder with a separate Tailwind setup, then the nested CSS file would link to the root Tailwind config file.

Visually, you can think of it like this:

.
├── admin
│   ├── src
│   │   └── styles
│   │       └── index.css       <-- This will be linked to (1)
│   └── tailwind.config.js      (2)
├── src
│   └── styles
│       └── index.css           <-- This will be linked to (1)
└── tailwind.config.js          (1)

If you run the upgrade command from the root of your project, then the /src/styles/index.css will be linked to /tailwind.config.js which is what we expect.

But /admin/src/styles/index.css will also be linked to /tailwind.config.js

With this PR we improve this behavior by looking at the CSS file, and crawling up the parent tree. This mens that the new behavior looks like this:

.
├── admin
│   ├── src
│   │   └── styles
│   │       └── index.css       <-- This will be linked to (2)
│   └── tailwind.config.js      (2)
├── src
│   └── styles
│       └── index.css           <-- This will be linked to (1)
└── tailwind.config.js          (1)

Now /src/styles/index.css will be linked to /tailwind.config.js, and /admin/src/styles/index.css will be linked to /admin/tailwind.config.js.

When we discover the Tailwind config file, we will also print a message to the user to let them know which CSS file is linked to which Tailwind config file.

This should be a safe improvement because if your Tailwind config file had a different name, or if it lived in a sibling folder then Tailwind wouldn't find it either and you already required a @config "…"; directive in your CSS file to point to the correct file.

In the unlikely event that it turns out that 2 (or more) CSS files resolve to the same to the same Tailwind config file, then an upgrade might not be safe and some manual intervention might be needed. In this case, we will show a warning about this.

image

Test plan:

Running this on Tailwind UI's codebase it looks like this:

image
RobinMalfait commented 1 week ago

This involves printing relative paths, so to make sure they work as expected I temporarily enabled the Windows tests to ensure everything works.

You can see it passing here: https://github.com/tailwindlabs/tailwindcss/actions/runs/11854912553 As seen in this PR: https://github.com/tailwindlabs/tailwindcss/pull/15001/commits/c005e243e113ac2fc2eae0c1e9aa45aa3b826d4d