feat: switch to windicss (#65)

src/layouts/default.vue

@@ -2,7 +2,7 @@
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <router-view />
     <Footer />
-    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
       [Default Layout]
     </div>
   </main>

src/layouts/home.vue

@@ -2,7 +2,7 @@
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <router-view />
     <Footer />
-    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
       [Home Layout]
     </div>
   </main>

src/main.ts

@@ -1,4 +1,5 @@
-import './styles/main.postcss'
+import 'windi.css'
+import './styles/main.css'
 import { ViteSSG } from 'vite-ssg'
 import generatedRoutes from 'pages-generated'
 import { setupLayouts } from 'layouts-generated'

src/styles/main.css

@@ -1,7 +1,4 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import './markdown.postcss';
+@import './markdown.css';
 
 html,
 body,
@@ -17,18 +14,18 @@ html.dark {
 
 #nprogress {
   pointer-events: none;
+}
 
-  .bar {
-    @apply bg-teal-600 opacity-75;
+#nprogress .bar {
+  @apply bg-teal-600 opacity-75;
 
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
 
-    width: 100%;
-    height: 2px;
-  }
+  width: 100%;
+  height: 2px;
 }
 
 .btn {

src/styles/markdown.css

@@ -46,10 +46,3 @@ html.dark {
   --prism-line-highlight-background: #444444;
   --prism-selection-background: #444444;
 }
-
-/* fix tailwind typography in darkmode */
-.prose {
-  a code {
-    color: inherit;
-  }
-}