寫了幾篇文章後，興沖沖地先透過本機在網站上閱讀，但總感覺這些純文字的介面讓我提不起勁。那不如就先為網站的樣式做簡單的打底，這樣透過不同樣的文章，我就可以逐步地去調整成我想要的模樣。

我會透過 TailwindCSS 這個目前活躍的 CSS 框架來協助我編排 Digital Garden 的佈局，也透過其外掛（Plugin）讓我出其的文字顯示至少像是在 Obsidian 上有基本的樣式。

首先，先透過套件管理工具安裝相關的套件：

$ pnpm install -D @nuxtjs/tailwindcss @tailwindcss/typography

@nuxtjs/tailwindcss 是 Nuxt 的 Module，能協助快速安裝 Tailwind，而 @tailwindcss/typography 則是上述能幫助文章樣式編排的外掛。

再將 Tailwind Module 加入 Nuxt 的設定檔 nuxt.config.ts 即可。

export default defineNuxtConfig({
  // ...
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss'],
})

然後在於專案根目錄加入設定檔 @/tailwind.config.ts，並在之中讀取外掛。

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  plugins: [require('@tailwindcss/typography')],
}

最後再到 @/app.vue 中的 <NuxtPage /> 中加入 class="prose" 即可。

<template>
  <div>
    <NuxtPage class="prose" />
  </div>
</template>