从零开始搭建自己的博客 六：采用 Tailwind CSS

接下来我们重构一下项目，用 Tailwind CSS 来取代原先的 CSS。

安装 Tailwind

要想在 Nuxt.js 项目中安装 Tailwind CSS，有两种方法。第一种方法是标准安装，第二种方法是使用 Nuxt 模块来安装。其中第二种方法比较简单，故本项目采用第二种方法。欲进一步了解请看在 Nuxt 中安装 Tailwind CSS。

在项目根目录，输入以下命令：

npm install
npx nuxi module add @nuxtjs/tailwindcss
npx tailwindcss init

之后，你就可以在项目里使用 Tailwind CSS 了。

更新博客文章列表样式

将 pages/blog/index.vue 的内容更新如下：

<!-- @/pages/blog/index.vue -->
<template>
    <main>
        <ContentList v-slot="{ list }">
            <ul class="flex flex-col gap-4 w-full my-4">
                <li v-for="article in list" :key="article._path">
                    <NuxtLink :to="article._path" class="transition-colors block text-lg font-extrabold font-sans py-2 px-4 h-20 m-auto outline-dashed visited:block visited:text-lg visited:font-extrabold visited:font-sans visited:py-2 visited:px-4 visited:h-20 visited:m-auto visited:outline-dashed hover:bg-black hover:text-white active:bg-neutral-800">
                        {{ article.title }}
                    </NuxtLink>
                </li>
            </ul>
        </ContentList>
    </main>
</template>

<script setup lang="ts">
</script>

更新博客默认布局样式

<!-- @/layouts/default.vue -->
<template>
  <div class="min-h-screen grid grid-rows-[auto_1fr_auto] bg-white lg:max-w-screen-lg lg:m-auto">
    <!-- 导航栏 -->
    <nav class="block bg-black text-white">
      <ul class="flex gap-4 m-[1rem_3vw]">
        <li class="list-item "><NuxtLink class="transition-colors block text-lg font-bold border-[thick] border-double py-2 px-4 hover:text-black hover:bg-white hover:border-black active:bg-neutral-300" to="/">主页</NuxtLink></li>
        <li class="list-item "><NuxtLink class="transition-colors block text-lg font-bold border-[thick] border-double py-2 px-4 hover:text-black hover:bg-white hover:border-black active:bg-neutral-300" to="/about">个人介绍</NuxtLink></li>
        <li class="list-item "><NuxtLink class="transition-colors block text-lg font-bold border-[thick] border-double py-2 px-4 hover:text-black hover:bg-white hover:border-black active:bg-neutral-300" to="/blog">博客文章</NuxtLink></li>
      </ul>
    </nav>

    <!-- 页面主内容 -->
    <main class="overflow-auto mx-[3vw]">
      <slot />
    </main>

    <!-- 页脚 -->
    <footer class="text-center bg-black text-white py-4">
      <p>This blog is supported by Nuxt</p>
    </footer>
  </div>
</template>

<style scoped>
</style>