Upgrade tailwind (#364)

Author: iuliacimpeanu

package.json

@@ -46,6 +46,9 @@
     "@playwright/test": "1.49.1",
     "@swc/core": "1.3.90",
     "@swc/jest": "0.2.29",
+    "@tailwindcss/cli": "4.0.17",
+    "@tailwindcss/postcss": "4.1.3",
+    "@tailwindcss/vite": "4.1.11",
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
@@ -78,7 +81,7 @@
     "mochawesome-report-generator": "6.2.0",
     "postcss": "8.4.30",
     "prettier": "3.0.3",
-    "tailwindcss": "3.3.3",
+    "tailwindcss": "4.0.15",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.2",
     "typescript": "5.2.2",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {}
   }
 };

src/components/Button/Button.tsx

@@ -16,7 +16,7 @@ export const Button = ({
   disabled = false,
   type = 'button',
   id,
-  className = 'inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0 disabled:bg-gray-200 disabled:text-black disabled:cursor-not-allowed',
+  className = 'inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0 disabled:bg-gray-200 disabled:!text-black disabled:cursor-not-allowed',
   ...otherProps
 }: ButtonType) => {
   return (

src/initConfig.ts

@@ -1,4 +1,5 @@
-import './styles/globals.css';
+import './styles/tailwind.css';
+import './styles/style.css';
 
 import { walletConnectV2ProjectId } from 'config';
 import { EnvironmentsEnum, InitAppType } from './lib';

src/pages/Dashboard/widgets/PingPongAbi/PingPongAbi.tsx

@@ -68,7 +68,7 @@ export const PingPongAbi = () => {
             onClick={onSendPingTransaction}
             data-testid='btnPingAbi'
             data-cy='transactionBtn'
-            className='inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0 disabled:bg-gray-200 disabled:text-black disabled:cursor-not-allowed'
+            className='inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0 disabled:bg-gray-200 disabled:!text-black disabled:cursor-not-allowed'
           >
             <FontAwesomeIcon icon={faArrowUp} className='mr-1' />
             Ping
@@ -79,7 +79,7 @@ export const PingPongAbi = () => {
             data-testid='btnPongAbi'
             data-cy='transactionBtn'
             onClick={onSendPongTransaction}
-            className='inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0 disabled:bg-gray-200 disabled:text-black disabled:cursor-not-allowed'
+            className='inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0 disabled:bg-gray-200 disabled:!text-black disabled:cursor-not-allowed'
           >
             <FontAwesomeIcon icon={faArrowDown} className='mr-1' />
             Pong

src/styles/globals.css src/styles/style.csssrc/styles/globals.css renamed to src/styles/style.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+* {
+  font-family: 'Inter', sans-serif;
+}

src/styles/tailwind.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+@theme {
+    --background-image-mvx-white: url('../multiversx-white.svg');
+}

tailwind.config.js

@@ -28,6 +28,9 @@ export default defineConfig({
       globals: { Buffer: true, global: true, process: true }
     })
   ],
+  css: {
+    postcss: './postcss.config.js'
+  },
   build: {
     outDir: 'build'
   },