(＿ ＿*) Z z z

Author: antfu

package.json

@@ -9,19 +9,21 @@
     "@vueuse/core": "^4.0.0-rc.4",
     "dayjs": "^1.9.6",
     "vue": "^3.0.3",
-    "vue-router": "^4.0.0-rc.5"
+    "vue-router": "^4.0.0-rc.6"
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
-    "@iconify/json": "^1.1.265",
+    "@iconify/json": "^1.1.266",
     "@purge-icons/generated": "^0.4.1",
     "@types/markdown-it": "^10.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@vue/compiler-sfc": "^3.0.3",
+    "autoprefixer": "^10.0.4",
     "cross-env": "^7.0.2",
     "eslint": "^7.14.0",
     "markdown-it": "^12.0.2",
-    "tailwindcss": "^1.9.6",
+    "postcss-nested": "^5.0.1",
+    "tailwindcss": "^2.0.1",
     "typescript": "^4.1.2",
     "vite": "^1.0.0-rc.13",
     "vite-plugin-components": "^0.4.1",
@@ -30,6 +32,9 @@
     "vite-plugin-voie": "^0.4.0",
     "voie-pages": "^0.4.0"
   },
+  "resolutions": {
+    "postcss": "8.1.7"
+  },
   "eslintConfig": {
     "extends": "@antfu/eslint-config-vue",
     "rules": {

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('tailwindcss'),
+    require('postcss-nested'),
     require('autoprefixer'),
   ],
 }

src/css/index.postcss

@@ -0,0 +1,27 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import './markdown.postcss';
+
+html,
+body,
+#app {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  @apply font-mono;
+}
+
+html.dark {
+  background: #222;
+}
+
+.link {
+  @apply cursor-pointer opacity-50;
+
+  &:hover {
+    @apply opacity-100;
+  }
+}
+

src/css/markdown.postcss

@@ -0,0 +1,14 @@
+.markdown-body {
+  h1 {
+    font-size: 1rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+  a {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+  a:hover {
+    opacity: 1;
+  }
+}

src/main.postcss

@@ -23,18 +23,3 @@ html.dark {
 .link:hover {
   @apply opacity-100;
 }
-
-.btn {
-  @apply
-    px-4 py-1 rounded inline-block
-    bg-teal-600 text-white cursor-pointer
-    hover:bg-teal-700
-    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
-}
-
-.icon-btn {
-  @apply
-    inline-block cursor-pointer select-none
-    opacity-75 transition duration-200 ease-in-out
-    hover:opacity-100;
-}

tailwind.config.js

@@ -29,17 +29,5 @@ module.exports = {
     textColor: ['dark', 'hover', 'active', 'disabled'],
     opacity: ['dark', 'hover', 'active', 'focus', 'disabled'],
   },
-  future: {
-    purgeLayersByDefault: true,
-    removeDeprecatedGapUtilities: true,
-  },
-  experimental: {
-    darkModeVariant: true,
-    applyComplexClasses: true,
-    uniformColorPalette: true,
-    extendedSpacingScale: true,
-    defaultLineHeights: true,
-    extendedFontSizeScale: true,
-  },
-  dark: 'class',
+  darkMode: 'class',
 }