CSS codemod: Migrate @import "tailwindcss/tailwind.css" to @import "tailwindcss"

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512))
 - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))
+- _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
 
 ## [4.0.0-alpha.25] - 2024-09-24
 

packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.test.ts

@@ -24,6 +24,16 @@ it("should not migrate `@import 'tailwindcss'`", async () => {
   `)
 })
 
+it('should migrate the tailwind.css import', async () => {
+  expect(
+    await migrate(css`
+      @import 'tailwindcss/tailwind.css';
+    `),
+  ).toEqual(css`
+    @import 'tailwindcss';
+  `)
+})
+
 it('should migrate the default @tailwind directives to a single import', async () => {
   expect(
     await migrate(css`

packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.ts

@@ -15,8 +15,13 @@ export function migrateTailwindDirectives(): Plugin {
     let layerOrder: string[] = []
 
     root.walkAtRules((node) => {
+      // Migrate legacy `@import "tailwindcss/tailwind.css"`
+      if (node.name === 'import' && node.params.match(/^["']tailwindcss\/tailwind\.css["']$/)) {
+        node.params = node.params.replace('tailwindcss/tailwind.css', 'tailwindcss')
+      }
+
       // Track old imports and directives
-      if (
+      else if (
         (node.name === 'tailwind' && node.params === 'base') ||
         (node.name === 'import' && node.params.match(/^["']tailwindcss\/base["']$/))
       ) {