[BUG] - The default `transition` of tailwindcss is overridden by the `nextui` plugin and has a higher priority. #1502

u3u · 2023-08-26T15:06:08Z

NextUI Version

2.1.5

Describe the bug

This will prevent me from directly setting my own transition effect.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Add the nextui() plugin to tailwind.config.js.

Expected behavior

There should not be duplicate transition.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

The text was updated successfully, but these errors were encountered:

jrgarciadev · 2023-08-26T15:14:34Z

@u3u could you explain better, what is the issue here?, Are you trying to add a custom transition to the tailwind config and the NextUI ones override it?

u3u · 2023-08-26T15:26:40Z

Yes, it will override the default transitionDuration that I have set and result in the generation of additional duplicate .transition classes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        400: '400ms',
        DEFAULT: '300ms',
      },
    }
  }
}

u3u · 2023-08-28T14:05:43Z

@jrgarciadev I think nextui should directly remove the existing transition* classes in tailwindcss.

They should not be redefined.

This patch is effective for me.

@nextui-org__theme@2.1.3.patch

diff --git a/dist/chunk-KPK2JQIF.mjs b/dist/chunk-KPK2JQIF.mjs
index 8ca977c23a07bc8bd2429fb29c3bc14e058bc012..ca3ace0e4d4789a34e4db3e4fc6ee78ad32aedba 100644
--- a/dist/chunk-KPK2JQIF.mjs
+++ b/dist/chunk-KPK2JQIF.mjs
@@ -1,31 +1,11 @@
 // src/utilities/transition.ts
 var DEFAULT_TRANSITION_DURATION = "250ms";
 var transition_default = {
-  ".transition-all": {
-    "transition-property": "all",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-background": {
     "transition-property": "background",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-colors": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-opacity": {
-    "transition-property": "opacity",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-colors-opacity": {
     "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
@@ -46,16 +26,6 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition-shadow": {
-    "transition-property": "box-shadow",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-transform": {
-    "transition-property": "transform",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-transform-opacity": {
     "transition-property": "transform, opacity",
     "transition-timing-function": "ease",
diff --git a/dist/index.js b/dist/index.js
index 0aa490d0657747f37c0fdc9c7a93b52600d7b36a..7b917fd4ece71810471861be3ba4c7de43cfc460 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -7194,31 +7194,11 @@ var animations = {
 // src/utilities/transition.ts
 var DEFAULT_TRANSITION_DURATION = "250ms";
 var transition_default = {
-  ".transition-all": {
-    "transition-property": "all",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-background": {
     "transition-property": "background",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-colors": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-opacity": {
-    "transition-property": "opacity",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-colors-opacity": {
     "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
@@ -7239,16 +7219,6 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition-shadow": {
-    "transition-property": "box-shadow",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-transform": {
-    "transition-property": "transform",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-transform-opacity": {
     "transition-property": "transform, opacity",
     "transition-timing-function": "ease",
diff --git a/dist/plugin.js b/dist/plugin.js
index 2d8b265b91b491d0127e02078f13b64dcbce06cb..174d61bdc7cf155169cd4f5b879c09eda2e9ed36 100644
--- a/dist/plugin.js
+++ b/dist/plugin.js
@@ -425,31 +425,11 @@ var animations = {
 // src/utilities/transition.ts
 var DEFAULT_TRANSITION_DURATION = "250ms";
 var transition_default = {
-  ".transition-all": {
-    "transition-property": "all",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-background": {
     "transition-property": "background",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-colors": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-opacity": {
-    "transition-property": "opacity",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-colors-opacity": {
     "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
@@ -470,16 +450,6 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition-shadow": {
-    "transition-property": "box-shadow",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-transform": {
-    "transition-property": "transform",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-transform-opacity": {
     "transition-property": "transform, opacity",
     "transition-timing-function": "ease",
diff --git a/dist/utilities/index.js b/dist/utilities/index.js
index 41a6cbc22352e6c8935a5927dfdf2deab0615207..051eaa05cb43d201df9ad72463de13919c9edf55 100644
--- a/dist/utilities/index.js
+++ b/dist/utilities/index.js
@@ -27,31 +27,11 @@ module.exports = __toCommonJS(utilities_exports);
 // src/utilities/transition.ts
 var DEFAULT_TRANSITION_DURATION = "250ms";
 var transition_default = {
-  ".transition-all": {
-    "transition-property": "all",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-background": {
     "transition-property": "background",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-colors": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-opacity": {
-    "transition-property": "opacity",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-colors-opacity": {
     "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
@@ -72,16 +52,6 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition-shadow": {
-    "transition-property": "box-shadow",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-transform": {
-    "transition-property": "transform",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-transform-opacity": {
     "transition-property": "transform, opacity",
     "transition-timing-function": "ease",
diff --git a/dist/utilities/transition.js b/dist/utilities/transition.js
index 083201d35b4f89df0dd2a68b83c7c13e3d0be7fc..6905f1d79f1d5feb062889e21cbdd0cb891dbe95 100644
--- a/dist/utilities/transition.js
+++ b/dist/utilities/transition.js
@@ -25,31 +25,11 @@ __export(transition_exports, {
 module.exports = __toCommonJS(transition_exports);
 var DEFAULT_TRANSITION_DURATION = "250ms";
 var transition_default = {
-  ".transition-all": {
-    "transition-property": "all",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-background": {
     "transition-property": "background",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-colors": {
-    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-opacity": {
-    "transition-property": "opacity",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-colors-opacity": {
     "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
@@ -70,16 +50,6 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
-  ".transition-shadow": {
-    "transition-property": "box-shadow",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
-  ".transition-transform": {
-    "transition-property": "transform",
-    "transition-timing-function": "ease",
-    "transition-duration": DEFAULT_TRANSITION_DURATION
-  },
   ".transition-transform-opacity": {
     "transition-property": "transform, opacity",
     "transition-timing-function": "ease",

jrgarciadev · 2023-08-28T14:07:56Z

I agree, I'll redefine the transitions names to avoid the conflicts

u3u · 2023-08-28T14:19:34Z

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionDuration: {
+        DEFAULT: '250ms',
      },
    }
  }
}

Thank you! However, I believe that the standard transition effects transition-(all|colors|opacity|shadow|transform) do not need to be renamed and redefined because it seems that only the default duration has been modified. It can be directly overridden in tailwind.config.js.

luisanton-io · 2023-10-24T14:19:17Z

Facing the same issue. Importing NextUI also overrides transition durations set via Tailwind arbitrary values like duration-[3s].
Just checking if there is a fix in the works...?

AntoineArt · 2023-10-25T12:49:13Z

I think I have the same problem, I want to replace the default transition duration and did it like @u3u but it doesn't seem to do anything.
This is definitely not critical but would be great to be able to do it because I feel default nextui transition duration is a bit too long for me

njarraud · 2024-04-04T21:46:20Z

It seems that it is still an issue. I cannot define custom transition durations via tailwind as mentioned by luisanton-io. nextui always overwrites them? It makes it hard to mix with other custom components.

Any plans for a fix or a solution?

Moriarty47 · 2024-04-09T17:19:05Z

Yes, the nextui transition effects take a higher priority.

And now I have to use them like this !duration-300 transition-opacity !ease-in-out to make it work.

u3u · 2024-04-10T02:13:44Z

I have submitted a PR (#2677), the next version will address this issue.

u3u added the 🐛 Type: Bug Something isn't working label Aug 26, 2023

u3u mentioned this issue Apr 10, 2024

fix: remove conflicting transition utilities #2677

Merged

jrgarciadev closed this as completed in #2677 Apr 14, 2024

github-actions bot mentioned this issue Apr 14, 2024

ci(changesets): 📦 version packages #2441

Merged

u3u mentioned this issue Sep 23, 2024

fix(theme): make skeleton invisible after data loaded #3217

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] - The default `transition` of tailwindcss is overridden by the `nextui` plugin and has a higher priority. #1502

[BUG] - The default `transition` of tailwindcss is overridden by the `nextui` plugin and has a higher priority. #1502

u3u commented Aug 26, 2023

jrgarciadev commented Aug 26, 2023

u3u commented Aug 26, 2023 •

edited

Loading

u3u commented Aug 28, 2023

jrgarciadev commented Aug 28, 2023

u3u commented Aug 28, 2023

luisanton-io commented Oct 24, 2023 •

edited

Loading

AntoineArt commented Oct 25, 2023

njarraud commented Apr 4, 2024

Moriarty47 commented Apr 9, 2024

u3u commented Apr 10, 2024

[BUG] - The default transition of tailwindcss is overridden by the nextui plugin and has a higher priority. #1502

[BUG] - The default transition of tailwindcss is overridden by the nextui plugin and has a higher priority. #1502

Comments

u3u commented Aug 26, 2023

NextUI Version

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Operating System Version

Browser

jrgarciadev commented Aug 26, 2023

u3u commented Aug 26, 2023 • edited Loading

u3u commented Aug 28, 2023

jrgarciadev commented Aug 28, 2023

u3u commented Aug 28, 2023

luisanton-io commented Oct 24, 2023 • edited Loading

AntoineArt commented Oct 25, 2023

njarraud commented Apr 4, 2024

Moriarty47 commented Apr 9, 2024

u3u commented Apr 10, 2024

[BUG] - The default `transition` of tailwindcss is overridden by the `nextui` plugin and has a higher priority. #1502

[BUG] - The default `transition` of tailwindcss is overridden by the `nextui` plugin and has a higher priority. #1502

u3u commented Aug 26, 2023 •

edited

Loading

luisanton-io commented Oct 24, 2023 •

edited

Loading