跳至主要內容

在Nuxt中整合Tailwind CSS


在Nuxt中整合Tailwind CSS

创建Nuxt 3项目

官方文档:https://nuxt.com/docs/getting-started/installationopen in new window

pnpm dlx nuxi@latest init nuxt3-tailwind

提示

可能超时,要在 C:\Windows\System32\drivers\etc 设置一下hosts

185.199.111.133 raw.githubusercontent.com

安装Tailwind CSS

官方文档:https://tailwindcss.com/docs/guides/nuxtjs#standardopen in new window

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

nuxt.config.ts 中设置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

content 中配置生效的路径

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建一个 ./assets/css/tailwind.css ,并加入以下代码

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.ts 添加 css: ['~/assets/css/tailwind.css'],

安装Tailwind UI

安装 Headless UIopen in new windowHeroiconsopen in new window

pnpm install @headlessui/vue @heroicons/vue

导入一个 Tailwind UI 的 SideBar 组件

创建一个布局

  • 创建一个 layouts 文件夹
  • 在该文件夹下创建一个 default.vue
  • 复制 sidebar 代码到 default.vue,并在需要显示内容的地方加上 <slot /> 标签

配置 app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<NuxtPage /> 是用于渲染 pages 文件夹下的页面

创建 pages 文件下的 index.vue

<template>
  <div>
    <NuxtLink to="/">Welcome</NuxtLink>
  </div>
</template>

注意

完成!创建的时候踩了一个坑

同一IP和端口下,上一个运行项目的缓存,会影响下一个项目

Nuxt会提示 nuxt [Vue Router warn]: No match found for location with path

清理浏览器缓存即可

上次编辑于:
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度