feat: Setup tailwindcss and use it in Button component.

medyo · zouhir96 · May 4, 2025 · May 12, 2025 · May 22, 2025 · Jun 2, 2025
commit d40e92f703ea1e2f54af07ff713a8329f36d2635
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,7 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "jsxBracketSameLine": true
-}
+  "jsxBracketSameLine": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/assets/index.css"
+}
diff --git a/index.html b/index.html
@@ -7,19 +7,19 @@
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="preconnect" href="https://hackertab.dev" />
+    <link href="/src/styles.css" rel="stylesheet" />
     <script src="/startup.js"></script>
 
     <% if (isWebBuild) { %>
-      <title>Hackertab</title>
-      <link rel="manifest" href="/web_manifest.json" />
+    <title>Hackertab</title>
+    <link rel="manifest" href="/web_manifest.json" />
     <% } else { %>
-      <title>New Tab</title>
+    <title>New Tab</title>
     <%}%>
   </head>
   <body class="preload">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
-
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": false,
   "dependencies": {
     "@amplitude/analytics-browser": "^1.5.5",
+    "@tailwindcss/vite": "^4.1.5",
     "@tanstack/query-async-storage-persister": "^5.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@tanstack/react-query-persist-client": "^5.8.4",
@@ -33,6 +34,7 @@
     "react-spring-bottom-sheet": "^3.4.1",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
+    "tailwindcss": "^4.1.5",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
     "vite-plugin-ejs": "^1.6.4",
@@ -87,7 +89,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "terser": "^5.19.2",
     "typescript": "^5.1.6",
     "vite": "^6.2.4",

diff --git a/src/assets/App.css b/src/assets/App.css
@@ -1,4 +1,4 @@
-@import 'variables.css';
+@import './variables.css';
 
 html {
   background: var(--background-color);

diff --git a/src/assets/index.css b/src/assets/index.css
@@ -1,4 +1,5 @@
-@import 'variables.css';
+@import 'tailwindcss';
+@import './variables.css';
 
 body {
   margin: 0;
@@ -19,3 +20,12 @@ code {
   width: 100vw;
   display: flex;
 }
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-btn-background-color: var(--button-background-color);
+  --color-btn-hover-background-color: var(--button-hover-background-color);
+  --color-btn-text-color: var(--button-text-color);
+  --color-btn-hover-text-color: var(--button-hover-text-color);
+}
diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import React from 'react'
 import { Spinner } from '../Spinner'
 import './Button.css'
@@ -26,14 +25,8 @@ export const Button = ({
   isLoading = false,
 }: ButtonProps) => {
   return (
-    <button
-      className={clsx(
-        'button',
-        isLoading && 'loading',
-        sizes[size],
-        className,
-        isLoading && 'disabled'
-      )}
+    <button 
+  className="gap-2 px-4 bg-btn-background-color py-2 rounded-full hover:bg-btn-hover-background-color text-btn-text-color hover:text-btn-hover-text-color cursor-pointer justify-center items-center"
       onClick={onClick}
       disabled={isLoading}>
       {isLoading ? <Spinner size="small" /> : startIcon}

diff --git a/vite.config.mjs b/vite.config.mjs
@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
@@ -28,6 +29,7 @@ export default defineConfig(({ mode }) => {
       react(),
       viteTsconfigPaths(),
       svgrPlugin(),
+      tailwindcss(),
     ],
     define: {
       'process.env': {},