Add CSS codemods for migrating @tailwind directives

[RobinMalfait]

This PR adds CSS codemods for migrating existing @tailwind directives to the new alternatives.

This PR has the ability to migrate the following cases:

---

Typical default usage of @tailwind directives in v3.

Input:

@tailwind base;
@tailwind components;
@tailwind utilities;

Output:

@import 'tailwindcss';

---

Similar as above, but always using @import instead of @import directly.

Input:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Output:

@import 'tailwindcss';

---

When you are only using @tailwind base:

Input:

@tailwind base;

Output:

@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);

---

When you are only using @tailwind utilities:

Input:

@tailwind utilities;

Output:

@import 'tailwindcss/utilities' layer(utilities);

---

If the default order changes (aka, @tailwind utilities was defined before @tailwind base), then an additional @layer will be added to the top to re-define the default order.

Input:

@tailwind utilities;
@tailwind base;

Output:

@layer theme, components, utilities, base;
@import 'tailwindcss';

---

When you are only using @tailwind base; @tailwind utilities;:

Input:

@tailwind base;
@tailwind utilities;

Output:

@import 'tailwindcss';

We currently don't have a concept of @tailwind components in v4, so if you are not using @tailwind components, we can expand to the default @import 'tailwindcss'; instead of the individual imports.

---

@tailwind screens and @tailwind variants are not supported/necessary in v4, so we can safely remove them.

Input:

@tailwind screens;
@tailwind variants;

Output:

[thecrypticace]

I'm not sure that this translation is correct — though maybe it's still fine?

In this case in v3 utilities would definitely appear before base layer styles (though I can't think of any reason anyone would ever do that). @import 'tailwindcss' would definitely not operate that way.

[RobinMalfait]

The order shouldn't matter anymore since we are using native layers and @import 'tailwindcss' defines the order at the top:

/* tailwindcss/index.css */
@layer theme, base, components, utilities;

@import './theme.css' layer(theme);
@import './preflight.css' layer(base);
@import './utilities.css' layer(utilities);

I think if we want to be 100% correct here, we should a modified version of @layer theme, base, components, utilities; at the top.

Thoughts?

[RobinMalfait]

If we have multiple @layer foo, bar, baz definitions, then the first one wins. E.g.:

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%40layer%20base%2C%20theme%2C%20components%2C%20utilities%3B%5Cn%40layer%20theme%2C%20components%2C%20base%2C%20utilities%3B%5Cn%40layer%20theme%2C%20base%2C%20components%2C%20utilities%3B%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

[thecrypticace]

I think that would be the most correct translation but uh maybe it's fine. Maybe @adamwathan has thoughts here? It could help us nudge people to order them in a more consistent way.

[RobinMalfait]

Added support for that in the latest commit: 5796dad