tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

History

Improve multi-root @config linking (#15001 )

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.

<img width="1552" alt="image"
src="https://github.com/user-attachments/assets/7a1ad11d-18c5-4b7d-9a02-14f0116ae955">


Test plan:
---

- Added an integration test that properly links the nearest Tailwind
config file by looking up the tree
- Added an integration test that resolves 2 or more CSS files to the
same config file, resulting in an error where manual intervention is
needed
- Ran it on the Tailwind UI codebase

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

<img width="1552" alt="image"
src="https://github.com/user-attachments/assets/21785428-5e0d-47f7-80ec-dab497f58784">

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

2024-11-18 16:43:44 +00:00

src

Improve multi-root @config linking (#15001 )

2024-11-18 16:43:44 +00:00

package.json

Update tree-sitter-typescript 0.23.0 → 0.23.2 (minor) (#15026 )

2024-11-18 10:23:22 +01:00

README.md

Add initial codemod tooling (#14434 )

2024-09-18 16:45:43 +02:00

tsconfig.json

Internal refactor, introduce AtRule (#14802 )