build: setup tailwind

ActivityWatch · Nov 14, 2023 · 7df9d7c · 7df9d7c
1 parent fffc6b5
commit 7df9d7c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,5 +1,9 @@
 @import "./base.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 #app {
   max-width: 1280px;
   margin: 0 auto;

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
@@ -4,13 +4,13 @@ import { RouterLink } from "vue-router";
 
 <template>
   <nav class="flex justify-center space-x-4 mt-4">
-    <div class="rounded border">
+    <div class="rounded border px-2 py-1">
       <RouterLink to="/">Home</RouterLink>
     </div>
-    <div class="rounded border">
+    <div class="rounded border px-2 py-1">
       <RouterLink to="/about">About</RouterLink>
     </div>
-    <div class="rounded border">
+    <div class="rounded border px-2 py-1">
       <RouterLink to="/settings">Settings</RouterLink>
     </div>
   </nav>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};