Update dependency tailwindcss to v4

package.json

@@ -22,6 +22,8 @@
     "prepare": "rm -Rf dist; npm run build; npm run tailwind"
   },
   "dependencies": {
+    "@storybook/test": "^8.0.8",
+    "@tailwindcss/postcss": "^4.1.15",
     "autoprefixer": "^10.4.12",
     "d3": "^7.9.0",
     "postcss": "^8.4.17",
@@ -50,7 +52,7 @@
     "snazzy": "^9.0.0",
     "standard": "^17.0.0",
     "storybook": "^9.1.2",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^4.0.0",
     "tsd": "^0.31.2",
     "vite": "^5.0.0",
     "vitest": "^3.0.0"

src/components/Common.module.css

@@ -240,13 +240,13 @@
   @apply px-2 py-2.5;
 }
 .text--error-red {
-  @apply text-error-red
+  @apply text-error-red;
 }
 .text--error-red-70 {
-  @apply text-error-red/70
+  @apply text-error-red/70;
 }
 .text--white {
-  @apply text-white
+  @apply text-white;
 }
 .text--white-70 {
   @apply text-white/70;
@@ -319,10 +319,10 @@
   @apply text-electric-purple/70;
 }
 .text--base {
-  @apply text-base
+  @apply text-base;
 }
 .text--xs {
-  @apply text-xs
+  @apply text-xs;
 }
 
 
@@ -355,35 +355,35 @@
   @apply bg-tertiary-blue;
 }
 .background-color-warning-yellow {
-  @apply bg-warning-yellow ;
+  @apply bg-warning-yellow;
 }
 .background-color-rich-black {
-  @apply bg-rich-black ;
+  @apply bg-rich-black;
 }
 .background-color-fluorescent-cyan {
-  @apply bg-fluorescent-cyan ;
+  @apply bg-fluorescent-cyan;
 }
 .background-color-giants-orange {
-  @apply bg-giants-orange ;
+  @apply bg-giants-orange;
 }
 .background-color-electric-purple {
-  @apply bg-electric-purple ;
+  @apply bg-electric-purple;
 }
 .background-color-black-russian {
-  @apply bg-black-russian ;
+  @apply bg-black-russian;
 }
 
 .background-color-night {
-  @apply bg-night ;
+  @apply bg-night;
 }
 .background-color-anti-flash-white {
-  @apply bg-anti-flash-white ;
+  @apply bg-anti-flash-white;
 }
 .background-color-fire-engine-red {
-  @apply bg-fire-engine-red ;
+  @apply bg-fire-engine-red;
 }
 .background-color-alternate-rich-black {
-  @apply bg-alternate-rich-black ;
+  @apply bg-alternate-rich-black;
 }
 .background-color-transparent{
   @apply bg-transparent;
@@ -413,10 +413,10 @@
   @apply opacity-30;
 }
 .padding--none {
-  @apply p-0 ;
+  @apply p-0;
 }
 .padding--small {
-  @apply p-1 ;
+  @apply p-1;
 }
 .padding--medium {
   @apply p-2;

src/components/Modal.module.css

@@ -9,10 +9,10 @@
   @apply fixed top-0 left-0 w-screen h-full z-20 bg-rich-black/95 flex justify-center items-center;
 }
 .fixedContainer {
-  @apply fixed top-0 left-0 w-full h-screen z-20 ;
+  @apply fixed top-0 left-0 w-full h-screen z-20;
 }
 .content {
-  @apply fixed top-0 h-[100vH] flex justify-center items-center ;
+  @apply fixed top-0 h-[100vH] flex justify-center items-center;
 }
 
 .container {

src/components/ModalStepsForward.module.css

@@ -15,7 +15,7 @@
 }
 .leftWrapper {
   @apply overflow-y-auto w-full h-full pb-40;
-  max-height: calc(100vh - 200px)
+  max-height: calc(100vh - 200px);
 }
 .left {
   @apply min-w-[60%] max-w-[60%] w-full ; 

src/components/Sidebar.module.css

@@ -42,7 +42,7 @@
 }
 .item {
   @apply text-white ml-2 grow-0 text-left flex flex-col;
-  width: calc(100% - 28px)
+  width: calc(100% - 28px);
 }
 .itemSubTitle {
   @apply text-[10px] leading-[10px]; 

src/components/forms/Select.module.css

@@ -41,5 +41,5 @@
   @apply truncate;
 }
 .descriptionValue {
-  @apply opacity-70
+  @apply opacity-70;
 }

src/components/forms/SelectWithInput.module.css

@@ -36,5 +36,5 @@
   @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
 }
 .descriptionValue {
-  @apply opacity-70
+  @apply opacity-70;
 }

src/components/icons/Icons.module.css

@@ -205,11 +205,11 @@
 }
 
 .iconDisabled {
-  @apply opacity-30
+  @apply opacity-30;
 }
 
 .iconInactive {
-  @apply opacity-70
+  @apply opacity-70;
 }
 
 .strokeTransparent {

tailwind.config.cjs

@@ -79,5 +79,8 @@ module.exports = {
     'text-5xl',
     'text-6xl'
   ],
-  plugins: []
+  plugins: [
+    require('@tailwindcss/postcss'),
+    require('autoprefixer')
+  ]
 }