chore: add tailwind

package.json

@@ -33,11 +33,14 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "15.0.2",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   },
   "lint-staged": {

postcss.config.mjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/globals.css

@@ -1,3 +1,10 @@
+/* app/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom CSS here */
+
 html,
 body {
   max-width: 100vw;
@@ -23,26 +30,6 @@ a {
   text-decoration: none;
 }
 
-.flex {
-  display: flex;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-.justify-content-center {
-  justify-content: center;
-}
-
-.full {
-  width: 100%;
-}
-
-.full-height {
-  height: 100%;
-}
-
 .column {
   flex-direction: column;
 }
@@ -181,11 +168,6 @@ button[type="submit"] {
   }
 }
 
-.full-flex {
-  flex: 1;
-  width: 100%;
-}
-
 /* Header */
 
 .header-container {
@@ -434,35 +416,3 @@ button[type="submit"] {
   justify-content: flex-start;
   width: 100%;
 }
-
-.p-1 {
-  gap: 4px;
-}
-
-.p-2 {
-  gap: 8px;
-}
-
-.p-3 {
-  gap: 12px;
-}
-
-.p-4 {
-  gap: 16px;
-}
-
-.gap-1 {
-  gap: 4px;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.gap-3 {
-  gap: 12px;
-}
-
-.gap-4 {
-  gap: 16px;
-}

src/components/Header.tsx

@@ -19,7 +19,7 @@ const Header = () => {
       <div className="flex header-logo-container">
         <LogoIcon />
         <h1 className="header-title">Demo dapp</h1>
-        <div className="flex full-flex" />
+        <div className="flex flex-1 w-full" />
 
         {isConnected && (
           <div className="flex header-profile-container">

src/components/StarknetDapp.tsx

@@ -16,7 +16,7 @@ const StarknetDapp = () => {
   const { isConnected } = useAccount()
 
   return (
-    <div className="flex full column">
+    <div className="flex w-full column">
       <Header />
 
       <div className="flex get-started-container">
@@ -34,7 +34,7 @@ const StarknetDapp = () => {
       </div>
 
       <div className="flex sections-container">
-        <div className="flex full column sections-list">
+        <div className="flex w-full column sections-list">
           <SectionButton
             section="Connection"
             setSection={setSection}
@@ -66,7 +66,7 @@ const StarknetDapp = () => {
           />
         </div>
 
-        <div className="flex full-flex">
+        <div className="flex flex-1 w-full">
           {section === "Connection" && <Connect />}
           {section === "Transactions" && <Transactions />}
           {section === "Signing" && <SignMessage />}

src/components/connect/Connect.tsx

@@ -27,7 +27,7 @@ const Connect = () => {
         <div className="flex gap-3">
           <ConnectStarknetkitModal />
           <Button
-            className={`full ${!isConnected ? "disabled" : ""}`}
+            className={`w-full ${!isConnected ? "disabled" : ""}`}
             onClick={() => disconnect()}
             disabled={!isConnected}
             hideChevron

src/components/connect/ConnectStarknetkitModal.tsx

@@ -11,7 +11,7 @@ const ConnectStarknetkitModal = () => {
 
   return (
     <Button
-      className="full"
+      className="w-full"
       onClick={async () => {
         const { connector } = await starknetkitConnectModal()
         if (!connector) return // or throw error

src/components/connect/ConnectorButton.tsx

@@ -20,7 +20,7 @@ const ConnectorButton: FC<{ connector: Connector; icon: ReactNode }> = ({
       className="connector"
       hideChevron
     >
-      <div className="flex align-items-center gap-2">
+      <div className="flex items-center gap-2">
         {icon}
         {connector.name}
       </div>

src/components/sections/ERC20/AddToken.tsx

@@ -27,7 +27,7 @@ const AddToken = () => {
     <SectionLayout sectionTitle="Add Token">
       <div className="flex add-token-container">
         <Button
-          className="full"
+          className="w-full"
           onClick={async () => {
             await walletRequest.requestAsync()
           }}

src/components/sections/Network/AddNetwork.tsx

@@ -26,7 +26,7 @@ const AddNetwork = () => {
   return (
     <div className="flex network-container">
       <Button
-        className="full"
+        className="w-full"
         onClick={async () => {
           await walletRequest.requestAsync()
         }}

src/components/sections/Network/ChangeNetwork.tsx

@@ -18,7 +18,7 @@ const ChangeNetwork = () => {
   return (
     <div className="flex network-container">
       <Button
-        className="full"
+        className="w-full"
         onClick={async () => {
           await walletRequest.requestAsync()
         }}

src/components/sections/Network/Network.tsx

@@ -12,7 +12,7 @@ const Network = () => {
 
   return (
     <SectionLayout sectionTitle="Network">
-      <div className="flex full-flex gap-3">
+      <div className="flex flex-1 w-full gap-3">
         <AddNetwork />
         <ChangeNetwork />
       </div>

src/components/sections/SignMessage.tsx

@@ -52,9 +52,9 @@ const SignMessage = () => {
 
   return (
     <SectionLayout sectionTitle="Signing">
-      <div className="flex  full-flex" style={{ marginBottom: "16px" }}>
+      <div className="flex flex-1 w-full" style={{ marginBottom: "16px" }}>
         <form
-          className="sign-message-form full"
+          className="sign-message-form w-full"
           onSubmit={(e) => {
             e.preventDefault()
             handleSignSubmit()
@@ -64,7 +64,7 @@ const SignMessage = () => {
             id="short-text"
             name="short-text"
             placeholder="Short text"
-            className="full"
+            className="w-full"
             value={shortText}
             style={{ height: "160px" }}
             onChange={(e) => setShortText(e.target.value)}

src/components/sections/Transactions/SendERC20.tsx

@@ -51,7 +51,7 @@ const SendERC20 = () => {
   return (
     <div className="flex column gap-2">
       <Button
-        className="full"
+        className="w-full"
         onClick={handleTransferSubmit}
         disabled={buttonsDisabled}
         hideChevron

src/components/sections/Transactions/SendMulticall.tsx

@@ -56,7 +56,7 @@ const SendMulticall = () => {
   return (
     <div className="flex column gap-2">
       <Button
-        className="full"
+        className="w-full"
         onClick={handleTransferSubmit}
         disabled={buttonsDisabled}
         hideChevron

src/components/ui/Button.tsx

@@ -26,7 +26,7 @@ const Button: FC<ButtonProps> = ({
     className={`${props.className} ${selected ? "selected" : ""} ${props.disabled ? "disabled" : ""}`}
     onClick={onClick}
   >
-    <div className="flex align-items-center gap-2">
+    <div className="flex items-center gap-2">
       {leftIcon}
       {children}
     </div>

tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss"
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config