feat: refactor to Tailwind

Author: remarkablemark

index.html

@@ -41,5 +41,11 @@
       async
       defer
     ></script>
+    <style>
+      .github-corner > svg {
+        color: #151513;
+        fill: #fafafa;
+      }
+    </style>
   </body>
 </html>

package-lock.json

@@ -38,6 +38,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "tailwindcss": "3.4.17",
+    "tw-elements": "2.0.0",
     "typescript": "5.7.2",
     "vite": "6.0.5",
     "zustand": "5.0.2"

package.json

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

postcss.config.js

@@ -1,15 +1,22 @@
+import { useEffect } from 'react';
+import { initTWE, Ripple } from 'tw-elements';
+
 import Button from '../components/Button';
 import Counter from '../components/Counter';
 import Cursor from '../components/Cursor';
 import Generators from '../components/Generators';
 import Message from '../components/Message';
 
 export default function App() {
+  useEffect(() => {
+    initTWE({ Ripple });
+  }, []);
+
   return (
     <main>
       <Message />
 
-      <section>
+      <section className="py-6 px-9">
         <h1>Button Clicker</h1>
         <Counter />
         <Button />

src/components/App.tsx

@@ -14,7 +14,13 @@ export default function Button() {
 
   return (
     <p>
-      <button title="Click Button" onClick={handleClick}>
+      <button
+        data-twe-ripple-color="light"
+        data-twe-ripple-init
+        onClick={handleClick}
+        title="Click Button"
+        type="button"
+      >
         Click Button
       </button>
     </p>

src/components/Button.tsx

@@ -22,8 +22,10 @@ export default function Generators() {
     <>
       {generators.map((generator) => (
         <tr id={generator.id} key={generator.id}>
-          <td>
+          <td className="flex items-center">
             <button
+              data-twe-ripple-color="light"
+              data-twe-ripple-init
               disabled={clickStore.current < generator.cost.next}
               title={generator.label}
               onClick={() => {
@@ -37,8 +39,9 @@ export default function Generators() {
               }}
             >
               {generator.label}
-            </button>{' '}
-            {generator.owned.toLocaleString()}
+            </button>
+
+            <span className="ml-2">{generator.owned.toLocaleString()}</span>
           </td>
 
           <td>{generator.cost.next.toLocaleString()}</td>

src/components/Generators.tsx

@@ -3,5 +3,9 @@ import { useMessageStore } from '../state';
 export default function Message() {
   const { message } = useMessageStore();
 
-  return <header>{message}</header>;
+  return (
+    <header className="py-7 px-9 font-mono bg-neutral-900 text-gray-100">
+      {message}
+    </header>
+  );
 }

src/components/Message.tsx

@@ -2,56 +2,42 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  border: 0;
-  font:
-    14px 'Lucida Grande',
-    Helvetica,
-    Arial,
-    sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-header,
-section {
-  padding: 24px 36px;
-}
-
-main {
-  display: block;
-}
-
-header {
-  background: #111;
-  color: #eee;
-  font-family: Consolas, monospace;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-/* zebra stripes */
-tr:nth-child(even) {
-  background: #eee;
-}
-
-th,
-td {
-  border: 1px solid #ddd;
-  padding: 8px;
-}
-
-td:first-child {
-  text-align: left;
-}
-
-/* github-corners */
-.github-corner > svg {
-  color: #151513 !important;
-  fill: #fafafa !important;
-  height: 64px;
-  width: 64px;
+@layer base {
+  h1 {
+    @apply text-2xl font-bold;
+  }
+
+  p {
+    @apply my-3.5;
+  }
+
+  button {
+    @apply rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out dark:shadow-black/30;
+  }
+
+  button:hover {
+    @apply hover:bg-neutral-700 hover:shadow-dark-2 dark:hover:shadow-dark-strong;
+  }
+
+  button:active {
+    @apply active:bg-neutral-900 active:shadow-dark-2 dark:active:shadow-dark-strong;
+  }
+
+  button:focus {
+    @apply focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 dark:focus:shadow-dark-strong;
+  }
+
+  button:disabled {
+    @apply opacity-30 disabled:pointer-events-none select-none;
+  }
+
+  /* zebra stripes */
+  tr:nth-child(even) {
+    @apply bg-neutral-100;
+  }
+
+  th,
+  td {
+    @apply border border-neutral-200 p-2;
+  }
 }

src/style.css

@@ -1,9 +1,19 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: ['./index.html', './src/**/*.{js,ts,mjs,mts,jsx,tsx}'],
-  plugins: [],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,mjs,mts,jsx,tsx}',
+    './node_modules/tw-elements/js/**/*.js',
+  ],
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  plugins: [require('tw-elements/plugin.cjs')],
   theme: {
+    fontFamily: {
+      sans: '"Lucida Grande", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
     extend: {},
   },
 };