fix: update Tailwind utilities and refactor CSS classes

This commit upgrades Tailwind CSS utilities to version 3.1.1 and executes a refactor of several CSS classes across multiple components for better code understanding. Removed variables folders from the theme such as 'fontWeights' and 'borderRadius' to simplify the code structure.
everton-dgn · Mar 31, 2024 · de2d451 · de2d451
1 parent 58b41af
commit de2d451
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
   "devDependencies": {
     "dotenv": "^16.3.1",
     "@commitlint/cli": "^18.4.4",
-    "eleganceui-tailwind-utilities": "^3.0.0",
+    "eleganceui-tailwind-utilities": "^3.1.1",
     "@commitlint/config-conventional": "^18.4.4",
     "@playwright/test": "^1.41.0",
     "@testing-library/dom": "^9.3.4",

diff --git a/src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx b/src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from 'components/atoms'
 
 export const SkeletonFooterCustomerOrderModal = () => (
   <div className="px-4 py-[3px] shadow-sm ai-center bc-neutral-light-lavender bw-t f-wrap g-4 jc-between row-full">
-    <Skeleton className="br-5 h-8 w-24" />
-    <Skeleton className="br-5 h-8 w-44" />
+    <Skeleton className="h-8 w-24 br-[20px]" />
+    <Skeleton className="h-8 w-44 br-[20px]" />
   </div>
 )
diff --git a/src/theme/components/underlined-title.css b/src/theme/components/underlined-title.css
@@ -1,5 +1,5 @@
 @layer components {
   .underlined-title {
-    @apply fs-20 font-700 max-w-fit uppercase after-base tx-primary-500 after:mt-8 after:h-4 after:w-[30%] after:bg-secondary-500 after:br;
+    @apply fs-xl-bold-primary-500 max-w-fit uppercase after-base after:mt-2 after:h-1 after:w-[30%] after:bg-secondary-500 after:br;
   }
 }
diff --git a/src/theme/reset.css b/src/theme/reset.css
@@ -90,7 +90,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply br-5 bw-soft-white-blue bg-grey-light-500;
+    @apply br-[20px] bw bc-soft-white-blue bg-grey-light-500;
   }
 
   :root {

diff --git a/src/theme/variables/borderRadius.ts b/src/theme/variables/borderRadius.ts
diff --git a/src/theme/variables/fontWeights.ts b/src/theme/variables/fontWeights.ts
diff --git a/src/theme/variables/index.ts b/src/theme/variables/index.ts
@@ -2,5 +2,3 @@ export { colors } from './colors'
 export { zIndex } from './zIndex'
 export { boxShadows } from './boxShadows'
 export { keyframes } from './keyframes'
-export { fontWeights } from './fontWeights'
-export { borderRadius } from './borderRadius'
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,9 +6,7 @@ import {
   boxShadows,
   colors,
   keyframes,
-  zIndex,
-  fontWeights,
-  borderRadius,
+  zIndex
 } from './src/theme/variables'
 
 const config: Config = {
@@ -19,9 +17,7 @@ const config: Config = {
   theme: {
     extend: {
       colors,
-      zIndex,
-      fontWeights,
-      borderRadius,
+      zIndex: { ...defaultTheme.zIndex, ...zIndex },
       boxShadow: { ...defaultTheme.boxShadow, ...boxShadows },
       keyframes: { ...defaultTheme.keyframes, ...keyframes },
       fontFamily: {

diff --git a/yarn.lock b/yarn.lock
@@ -3687,10 +3687,10 @@ electron-to-chromium@^1.4.668:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz#1f077d9a095761804aec7ec6346c3f4b69b56534"
   integrity sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==
 
-eleganceui-tailwind-utilities@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eleganceui-tailwind-utilities/-/eleganceui-tailwind-utilities-3.0.0.tgz#0abea7ebc2c06bd1ab0d9a600fe945528bddaee2"
-  integrity sha512-/M7jpzj5WB+rjK7IIpTkEDtE4gxwQgAUuFJNJ+roJJtt1HUvIM6FLVdHipDGZSulNjmEfY/F7RcV2Ne5+SQc1w==
+eleganceui-tailwind-utilities@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/eleganceui-tailwind-utilities/-/eleganceui-tailwind-utilities-3.1.1.tgz#e675193ad493ce2d6003054b45faaf708dbb3e55"
+  integrity sha512-rrSnMEDgP1ebXxmsCLX0Ibpm0RlaM5gfq8/QHfuqatRcGSJSQl7hOS4+I8VI6TixPiiFfW0jnC6Wxh9w74kFdA==
 
 emoji-regex@^10.3.0:
   version "10.3.0"
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,7 +90,7 @@ @@
       }
       ::-webkit-scrollbar-thumb {
-        @apply br-5 bw-soft-white-blue bg-grey-light-500;
+        @apply br-[20px] bw bc-soft-white-blue bg-grey-light-500;
       }
       :root {
@@ Expand Down @@