tailwindcss

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

History

Add CSS codemods for migrating @tailwind directives (#14411 )

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:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Output:
```css
@import 'tailwindcss';
```

---

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

Input:
```css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

Output:
```css
@import 'tailwindcss';
```

---

When you are _only_ using `@tailwind base`:

Input:
```css
@tailwind base;
```

Output:
```css
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
```

---

When you are _only_ using `@tailwind utilities`:

Input:
```css
@tailwind utilities;
```

Output:
```css
@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:
```css
@tailwind utilities;
@tailwind base;
```

Output:
```css
@layer theme, components, utilities, base;
@import 'tailwindcss';
```

---

When you are _only_ using `@tailwind base; @tailwind utilities;`:

Input:
```css
@tailwind base;
@tailwind utilities;
```

Output:
```css
@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:
```css
@tailwind screens;
@tailwind variants;
```

Output:
```css
```

2024-09-18 22:40:23 +02:00

src

Add CSS codemods for migrating @tailwind directives (#14411 )

2024-09-18 22:40:23 +02:00

package.json

Add initial codemod tooling (#14434 )

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

README.md

Add initial codemod tooling (#14434 )

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

tsconfig.json

Add initial codemod tooling (#14434 )