+
[Default Layout]
diff --git a/src/layouts/home.vue b/src/layouts/home.vue
index 7c0524a..7119381 100644
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@@ -2,7 +2,7 @@
+
[Home Layout]
diff --git a/src/main.ts b/src/main.ts
index e7b0443..9b13618 100644
--- a/src/main.ts
+++ b/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'
diff --git a/src/styles/main.postcss b/src/styles/main.css
similarity index 65%
rename from src/styles/main.postcss
rename to src/styles/main.css
index 121293f..e911ca6 100755
--- a/src/styles/main.postcss
+++ b/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 {
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.css
similarity index 93%
rename from src/styles/markdown.postcss
rename to src/styles/markdown.css
index 0c4d347..020f539 100644
--- a/src/styles/markdown.postcss
+++ b/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;
- }
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index e48a03e..099ca64 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,44 +1,23 @@
/* eslint-disable @typescript-eslint/no-var-requires */
-const colors = require('tailwindcss/colors')
-const typography = require('@tailwindcss/typography')
+const colors = require('windicss/colors')
module.exports = {
- purge: {
- enabled: process.env.NODE_ENV === 'production',
- content: [
- './index.html',
- './src/**/*.vue',
- './src/**/*.md',
- './src/**/*.js',
- './src/**/*.ts',
- ],
- options: {
- safelist: ['prose', 'prose-sm', 'm-auto'],
- },
- },
- variants: {
- extend: {
- cursor: ['disabled'],
- backgroundColor: ['disabled'],
- borderColor: ['active', 'disabled'],
- textColor: ['active', 'disabled'],
- opacity: ['dark', 'active', 'disabled'],
- }
- },
darkMode: 'class',
- plugins: [typography],
+ plugins: [
+ require('windicss/plugin/typography'),
+ ],
theme: {
extend: {
- colors: {
- teal: colors.teal,
- },
typography: {
DEFAULT: {
css: {
+ maxWidth: '65ch',
color: 'inherit',
a: {
color: 'inherit',
opacity: 0.75,
+ fontWeight: '500',
+ textDecoration: 'underline',
'&:hover': {
opacity: 1,
color: colors.teal[600],
diff --git a/vite.config.ts b/vite.config.ts
index 5a6900f..e1fc49f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import Layouts from 'vite-plugin-vue-layouts'
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
import ViteComponents from 'vite-plugin-components'
import Markdown from 'vite-plugin-md'
+import WindiCSS from 'vite-plugin-windicss'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Prism from 'markdown-it-prism'
@@ -60,6 +61,11 @@ export default defineConfig({
// https://github.com/antfu/vite-plugin-icons
ViteIcons(),
+ // https://github.com/antfu/vite-plugin-windicss
+ ...WindiCSS({
+ safelist: 'prose prose-sm m-auto',
+ }),
+
// https://github.com/antfu/vite-plugin-pwa
VitePWA({
inlineRegister: false,