fix(shadcn): do not add outline-ring for v3 (#6814)

* fix(shadcn): do not add ring if tailwind v3 * chore: changeset * test(shadcn): update snapshots
shadcn-ui · Feb 28, 2025 · 8539dd6 · 8539dd6
1 parent bc7df68
commit 8539dd6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/.changeset/curvy-taxis-help.md b/.changeset/curvy-taxis-help.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+do not add ring for v3
diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts
@@ -100,7 +100,9 @@ export async function transformCssVars(
   }
 
   if (config.tailwind.cssVariables) {
-    plugins.push(updateBaseLayerPlugin())
+    plugins.push(
+      updateBaseLayerPlugin({ tailwindVersion: options.tailwindVersion })
+    )
   }
 
   const result = await postcss(plugins).process(input, {
@@ -118,12 +120,22 @@ export async function transformCssVars(
   return output
 }
 
-function updateBaseLayerPlugin() {
+function updateBaseLayerPlugin({
+  tailwindVersion,
+}: {
+  tailwindVersion?: TailwindVersion
+}) {
   return {
     postcssPlugin: "update-base-layer",
     Once(root: Root) {
       const requiredRules = [
-        { selector: "*", apply: "border-border outline-ring/50" },
+        {
+          selector: "*",
+          apply:
+            tailwindVersion === "v4"
+              ? "border-border outline-ring/50"
+              : "border-border",
+        },
         { selector: "body", apply: "bg-background text-foreground" },
       ]
 

diff --git a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
@@ -47,7 +47,7 @@ describe("transformCssVars", () => {
 
       @layer base {
         * {
-          @apply border-border outline-ring/50;
+          @apply border-border;
         }
         body {
           @apply bg-background text-foreground;
@@ -110,7 +110,7 @@ describe("transformCssVars", () => {
 
       @layer base {
         * {
-          @apply border-border outline-ring/50;
+          @apply border-border;
         }
         body {
           @apply bg-background text-foreground;
@@ -176,17 +176,6 @@ describe("transformCssVars", () => {
           @apply bg-background text-foreground;
         }
       }
-
-
-
-      @layer base {
-        * {
-          @apply border-border outline-ring/50;
-        }
-        body {
-          @apply bg-background text-foreground;
-        }
-      }
         "
     `)
   })