⚒️ Config TailwindCSS with Preact & Vitejs.

Author: pheralb

website/package.json

@@ -17,6 +17,7 @@
     "postcss": "8.4.16",
     "tailwindcss": "3.1.8",
     "typescript": "4.8.2",
+    "vite-tsconfig-paths": "3.5.0",
     "vite": "3.1.0"
   }
 }

website/public/vite.svg

@@ -1,32 +1,14 @@
-import { useState } from 'preact/hooks'
-import preactLogo from './assets/preact.svg'
-import './app.css'
+import { useState } from 'preact/hooks';
 
 export function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo preact" alt="Preact logo" />
-        </a>
-      </div>
-      <h1>Vite + Preact</h1>
-      <div class="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/app.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p class="read-the-docs">
-        Click on the Vite and Preact logos to learn more
-      </p>
-    </>
-  )
+    <div>
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+      <h1 className="text-3xl font-bold underline">Hello world!</h1>
+    </div>
+  );
 }

website/src/app.tsx

@@ -1,5 +1,9 @@
-import { render } from 'preact'
-import { App } from './app'
-import './index.css'
+import { render } from 'preact';
 
-render(<App />, document.getElementById('app') as HTMLElement)
+// App =>
+import { App } from '@/app';
+
+// Styles =>
+import '@/styles/globals.css';
+
+render(<App />, document.getElementById('app') as HTMLElement);

website/src/assets/preact.svg

@@ -1,7 +1,9 @@
-import React from 'preact';
-
 const Home = () => {
-  return <div>index</div>;
+  return (
+    <div>
+      <h1>page</h1>
+    </div>
+  );
 };
 
 export default Home;

website/src/index.css

@@ -1 +1,3 @@
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

website/src/main.tsx

@@ -1,7 +1,9 @@
-import { defineConfig } from 'vite'
-import preact from '@preact/preset-vite'
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
+
+// Plugins =>
+import tsconfigPaths from 'vite-tsconfig-paths';
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()]
-})
+  plugins: [preact(), tsconfigPaths()]
+});