@live-change/frontend-base 0.9.32 → 0.9.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/ComponentDialog.vue +2 -2
  2. package/NavBar.vue +28 -28
  3. package/Page.vue +3 -3
  4. package/UpdateBanner.vue +4 -4
  5. package/ViewRoot.vue +3 -4
  6. package/package.json +23 -19
  7. package/server-entry.js +23 -13
  8. package/vite-config.js +3 -0
package/ComponentDialog.vue CHANGED
@@ -1,14 +1,14 @@
1
1
  <template>
2
2
  <loading-zone suspense>
3
3
  <template v-slot:loading>
4
- <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
4
+ <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
5
5
  <ProgressSpinner animationDuration=".5s"/>
6
6
  </div>
7
7
  </template>
8
8
  <template v-slot:default="{ isLoading }">
9
9
  <working-zone>
10
10
  <template v-slot:working>
11
- <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
11
+ <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
12
12
  <ProgressSpinner animationDuration=".5s"/>
13
13
  </div>
14
14
  </template>
package/NavBar.vue CHANGED
@@ -4,16 +4,16 @@
4
4
  style="min-height: 80px" key="navbar">
5
5
 
6
6
  <router-link to="/">
7
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
7
+ <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
8
8
  </router-link>
9
9
  <div class="hidden lg:flex">
10
10
  <!-- place for desktop menu -->
11
11
  </div>
12
- <div class="flex flex-grow-1"></div>
12
+ <div class="flex grow"></div>
13
13
  <UserIcon />
14
14
 
15
- <div class="static w-auto w-full surface-overlay left-0 top-100 z-1 shadow-none hidden">
16
- <ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
15
+ <div class="static w-auto w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow-none hidden">
16
+ <ul class="list-none p-0 m-0 flex items-center select-none flex-row border-t-0">
17
17
  <li>
18
18
  <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100
19
19
  font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
@@ -29,49 +29,49 @@
29
29
  </ul>
30
30
  </div>
31
31
 
32
- <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
33
- v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
32
+ <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
33
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
34
34
  <i class="pi pi-bars text-4xl"></i>
35
35
  </a>
36
36
 
37
- <div class="align-items-center flex-grow-1 justify-content-between hidden absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
38
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
37
+ <div class="items-center grow justify-between hidden absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
38
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
39
39
  <li>
40
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
40
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
41
41
  <i class="pi pi-home mr-2"></i>
42
42
  <span>Home</span>
43
43
  </a>
44
44
  </li>
45
45
  <li class="lg:relative">
46
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
47
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
46
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple"
47
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
48
48
  <i class="pi pi-users mr-2"></i>
49
49
  <span>Customers</span>
50
- <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
50
+ <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
51
51
  </a>
52
- <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
52
+ <ul class="list-none py-4 px-12 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer">
53
53
  <li>
54
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
54
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
55
55
  <i class="pi pi-user-plus mr-2"></i>
56
56
  <span class="font-medium">Add New</span>
57
57
  </a>
58
58
  </li>
59
59
  <li class="relative">
60
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
61
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
60
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple"
61
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
62
62
  <i class="pi pi-search mr-2"></i>
63
63
  <span class="font-medium">Search</span>
64
64
  <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
65
65
  </a>
66
- <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
66
+ <ul class="list-none py-4 pl-4 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer left-full top-0">
67
67
  <li>
68
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
68
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
69
69
  <i class="pi pi-shopping-cart mr-2"></i>
70
70
  <span class="font-medium">Purchases</span>
71
71
  </a>
72
72
  </li>
73
73
  <li class="relative">
74
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
74
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
75
75
  <i class="pi pi-comments mr-2"></i>
76
76
  <span class="font-medium">Messages</span>
77
77
  </a>
@@ -81,31 +81,31 @@
81
81
  </ul>
82
82
  </li>
83
83
  <li>
84
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
84
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
85
85
  <i class="pi pi-calendar mr-2"></i>
86
86
  <span>Calendar</span>
87
87
  </a>
88
88
  </li>
89
89
  <li>
90
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
90
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
91
91
  <i class="pi pi-chart-line mr-2"></i>
92
92
  <span>Stats</span>
93
93
  </a>
94
94
  </li>
95
95
  </ul>
96
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
96
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row border-t border-surface lg:border-t-0">
97
97
  <li>
98
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
98
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
99
99
  <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
100
100
  <span class="block lg:hidden font-medium">Inbox</span>
101
101
  </a>
102
102
  </li>
103
- <li class="border-top-1 surface-border lg:border-top-none">
104
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
105
- <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
103
+ <li class="border-t border-surface lg:border-t-0">
104
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
105
+ <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
106
106
  <div class="block lg:hidden">
107
- <div class="text-900 font-medium">Josephine Lillard</div>
108
- <span class="text-600 font-medium text-sm">Marketing Specialist</span>
107
+ <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
108
+ <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
109
109
  </div>
110
110
  </a>
111
111
  </li>
package/Page.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="min-h-screen flex flex-column surface-ground">
2
+ <div class="min-h-screen flex flex-col bg-surface-50 dark:bg-surface-950">
3
3
  <slot name="navbar"></slot>
4
4
 
5
5
  <ConfirmPopup v-if="isMounted" />
@@ -9,10 +9,10 @@
9
9
  <ProgressBar v-if="loading || working" mode="indeterminate" class="absolute w-full" style="height: .2em" />
10
10
  </div>
11
11
  <div v-if="pageType === 'simple'"
12
- class="p-3 md:p-5 flex-grow-1 flex flex-column flex-auto align-items-center relative">
12
+ class="p-4 md:p-8 grow flex flex-col flex-auto items-center relative">
13
13
  <slot></slot>
14
14
  </div>
15
- <div v-if="pageType === 'wide'" class="relative flex-grow-1">
15
+ <div v-if="pageType === 'wide'" class="relative grow">
16
16
  <slot></slot>
17
17
  </div>
18
18
  <div>
package/UpdateBanner.vue CHANGED
@@ -1,11 +1,11 @@
1
1
  <template>
2
2
  <div v-if="updateAvailable && !updateBannerHidden" class="bg-yellow-400 text-gray-900 p-3 flex
3
3
  justify-content-between lg:justify-content-center align-items-center flex-wrap">
4
- <div class="font-bold mr-8">{{ t('app.updateAvailable') }}</div>
5
- <div class="align-items-center hidden md:flex">
6
- <span class="line-height-3">{{ t("app.newVersions") }}</span>
4
+ <div class="font-bold mr-20">{{ t('app.updateAvailable') }}</div>
5
+ <div class="items-center hidden md:flex">
6
+ <span class="leading-normal">{{ t("app.newVersions") }}</span>
7
7
  </div>
8
- <a class="flex align-items-center ml-2 mr-8">
8
+ <a class="flex items-center ml-2 mr-20">
9
9
  <a class="text-gray-900" href="#" @click="update">
10
10
  <span class="underline font-bold">{{ t("app.reload") }}</span>
11
11
  </a>
package/ViewRoot.vue CHANGED
@@ -8,7 +8,7 @@
8
8
  </template>
9
9
  <loading-zone v-else suspense @isLoading="l => loading = l" :key="route.href">
10
10
  <template v-slot:loading>
11
- <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
11
+ <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
12
12
  <ProgressSpinner animationDuration=".5s"/>
13
13
  </div>
14
14
  </template>
@@ -19,7 +19,7 @@
19
19
  </template>
20
20
  <working-zone @isWorking="w => working = w">
21
21
  <template v-slot:working>
22
- <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
22
+ <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
23
23
  <ProgressSpinner animationDuration=".5s"/>
24
24
  </div>
25
25
  </template>
@@ -41,8 +41,7 @@
41
41
 
42
42
  import Toast from 'primevue/toast'
43
43
 
44
- import 'primevue/resources/primevue.min.css'
45
- import 'primeflex/primeflex.css'
44
+ // import 'primeflex/primeflex.css'
46
45
  import 'primeicons/primeicons.css'
47
46
 
48
47
  import ProgressSpinner from 'primevue/progressspinner'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/frontend-base",
3
- "version": "0.9.32",
3
+ "version": "0.9.34",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -35,21 +35,23 @@
35
35
  "@lezer/rust": "=1.0.1",
36
36
  "@lezer/sass": "=1.0.3",
37
37
  "@lezer/xml": "=1.0.2",
38
- "@live-change/cli": "^0.9.32",
39
- "@live-change/dao": "^0.9.32",
40
- "@live-change/dao-message": "^0.9.32",
41
- "@live-change/dao-sockjs": "^0.9.32",
42
- "@live-change/dao-vue3": "^0.9.32",
43
- "@live-change/dao-websocket": "^0.9.32",
44
- "@live-change/email-service": "^0.9.32",
45
- "@live-change/password-authentication-service": "^0.9.32",
46
- "@live-change/secret-code-service": "^0.9.32",
47
- "@live-change/secret-link-service": "^0.9.32",
48
- "@live-change/security-frontend": "^0.9.32",
49
- "@live-change/session-service": "^0.9.32",
50
- "@live-change/user-service": "^0.9.32",
51
- "@live-change/vue3-components": "^0.9.32",
52
- "@live-change/vue3-ssr": "^0.9.32",
38
+ "@live-change/cli": "^0.9.34",
39
+ "@live-change/dao": "^0.9.34",
40
+ "@live-change/dao-message": "^0.9.34",
41
+ "@live-change/dao-sockjs": "^0.9.34",
42
+ "@live-change/dao-vue3": "^0.9.34",
43
+ "@live-change/dao-websocket": "^0.9.34",
44
+ "@live-change/email-service": "^0.9.34",
45
+ "@live-change/password-authentication-service": "^0.9.34",
46
+ "@live-change/secret-code-service": "^0.9.34",
47
+ "@live-change/secret-link-service": "^0.9.34",
48
+ "@live-change/security-frontend": "^0.9.34",
49
+ "@live-change/session-service": "^0.9.34",
50
+ "@live-change/user-service": "^0.9.34",
51
+ "@live-change/vue3-components": "^0.9.34",
52
+ "@live-change/vue3-ssr": "^0.9.34",
53
+ "@primevue/themes": "^4.2.5",
54
+ "@tailwindcss/vite": "4.0.6",
53
55
  "@unhead/ssr": "^1.6.2",
54
56
  "@vitejs/plugin-vue": "^5.0.5",
55
57
  "@vue/compiler-sfc": "^3.4.29",
@@ -78,11 +80,13 @@
78
80
  "markdown-it-task-lists": "^2.1.1",
79
81
  "primeflex": "^3.3.1",
80
82
  "primeicons": "^7.0.0",
81
- "primevue": "^3.52.0",
83
+ "primevue": "^4.2.5",
82
84
  "rollup-plugin-node-builtins": "^2.1.2",
83
85
  "rollup-plugin-visualizer": "5.14.0",
84
86
  "serialize-javascript": "^6.0.2",
85
87
  "serve-static": "^1.16.2",
88
+ "tailwindcss": "4.0.6",
89
+ "tailwindcss-primeui": "^0.4.0",
86
90
  "typescript": "5.4.5",
87
91
  "unhead": "^1.9.13",
88
92
  "unplugin-vue-components": "^0.27.0",
@@ -101,7 +105,7 @@
101
105
  "vue3-scroll-border": "0.1.6"
102
106
  },
103
107
  "devDependencies": {
104
- "@live-change/codeceptjs-helper": "^0.9.32",
108
+ "@live-change/codeceptjs-helper": "^0.9.34",
105
109
  "codeceptjs": "^3.6.10",
106
110
  "generate-password": "1.7.1",
107
111
  "playwright": "1.49.1",
@@ -115,5 +119,5 @@
115
119
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
116
120
  "license": "BSD-3-Clause",
117
121
  "description": "",
118
- "gitHead": "41022fc283020e2da3e82aa27274401052d2379a"
122
+ "gitHead": "e5f22de77fe6a3c0a0e1b91d17593e195aaae3b3"
119
123
  }
package/server-entry.js CHANGED
@@ -6,6 +6,8 @@ import { createApp } from "./main.js"
6
6
  import { setTime } from "./time.js"
7
7
 
8
8
  import { renderHeadToString } from "@vueuse/head"
9
+ import { Theme } from '@primeuix/styled'
10
+ import { Base, BaseStyle } from '@primevue/core'
9
11
 
10
12
  function escapeHtml(unsafe) {
11
13
  return (''+unsafe)
@@ -51,25 +53,33 @@ export function serverEntry(App, createRouter, config = {}) {
51
53
  ...(config.prefetch ?? []).map(fn => fn(app, router, head)),
52
54
  api.preFetchRoute(router.currentRoute, router)
53
55
  ])
54
- // passing SSR context object which will be available via useSSRContext()
55
- // @vitejs/plugin-vue injects code into a component's setup() that registers
56
- // itself on ctx.modules. After the render, ctx.modules would contain all the
57
- // components that have been instantiated during this render call.
56
+
58
57
  const ctx = {}
59
- const html = await renderToString(app, ctx)
60
58
 
59
+ let usedStyles = new Set()
60
+ Base.setLoadedStyleName = async (name) => usedStyles.add(name)
61
+
62
+ const html = await renderToString(app, ctx)
63
+ // get the prerender cache data
61
64
  const data = api.prerenderCache.cacheData()
62
65
 
63
- // the SSR manifest generated by Vite contains module -> chunk/asset mapping
64
- // which we can then use to determine what files need to be preloaded for this
65
- // request.
66
+ const renderedHead = await renderHeadToString(head)
66
67
 
67
- const renderedHead = await renderHeadToString(head)
68
68
 
69
- /* const html = 'html'
70
- const renderedHead= 'head'
71
- const data = {}
72
- const ctx = { modules: [] }*/
69
+ const styleSheets = []
70
+ styleSheets.push(`<style type="text/css" data-primevue-style-id="layer-order">${
71
+ BaseStyle.getLayerOrderThemeCSS()}</style>`)
72
+ BaseStyle.getLayerOrderThemeCSS()
73
+
74
+ styleSheets.push(Theme.getCommonStyleSheet())
75
+ for(const name of usedStyles) {
76
+ styleSheets.push(Theme.getStyleSheet(name))
77
+ const styleObject = await import(`primevue/${name}/style`)
78
+ styleSheets.push(styleObject.default.getThemeStyleSheet())
79
+ }
80
+ styleSheets.push(BaseStyle.getThemeStyleSheet())
81
+
82
+ renderedHead.headTags += styleSheets.join('\n')
73
83
 
74
84
  return { html, data, meta: renderedHead, modules: ctx.modules, response }
75
85
  }
package/vite-config.js CHANGED
@@ -5,6 +5,8 @@ import { findFreePorts } from 'find-free-ports'
5
5
  import path from 'path'
6
6
  import vuePlugin from '@vitejs/plugin-vue'
7
7
 
8
+ import tailwindcss from '@tailwindcss/vite'
9
+
8
10
  import Markdown from 'unplugin-vue-markdown/vite'
9
11
  import MarkdownItAnchor from 'markdown-it-anchor'
10
12
  import MarkdownItSub from 'markdown-it-sub'
@@ -80,6 +82,7 @@ export default async ({ command, mode, version }, options = {
80
82
  }
81
83
  },
82
84
  }),
85
+ tailwindcss(),
83
86
  Markdown({
84
87
  headEnabled: true,
85
88
  markdownItOptions: {