Skip to main content

tailwindcss 和界面组件

tailwindcss 的安装和配置​

_tailwindcss 可以通过 pnpm 安装，指令如下：

pnpm --filter <项目名称> add --save-dev @nuxtjs/tailwindcss

以上安装之后，是作为 Nuxt 官方提供的模块。他的作用是：

  • 自动安装并配置 tailwindcss 和 postcss；
  • 自动注入 tailwindcss（不用写 assets/css/tailwind.css 也能用；
  • 自动在 nuxt.config.ts 里注册；
  • 自动检测 tailwind.config.js 并合并；

安装和配置 DaisyUI​

安装 DaisyUI​

指令如下：

pnpm --filter <项目名称> add --save-dev daisyui

新建和修改tainwind.config.js​

在 Nuxt 项目根目录（就是有nuxt.config.ts的那个目录），如果还没有tailwind.config.js，新建一个：

// tailwind.config.js
module.exports = {
  content: [
    "./components/**/*.{vue,js,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark"],
  },
}