如何在Nuxt 3中配置Tailwind的Preline组件库

1. 安装依赖 #

确保已安装 Preline，若还未配置 Tailwind CSS，需先完成 Nuxt3 的 Tailwind 基础配置：

npm i preline

2. 修改 Tailwind 配置文件 (tailwind.config.js) #

必须同时包含项目自身文件路径和 Preline 文件，否则项目组件的 Tailwind 样式与 Preline 样式都无法正常生效：

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

3. 修正 Nuxt3 全局脚本配置 (nuxt.config.ts) #

Nuxt3 已废弃 Nuxt2 中的顶级head字段，需在app配置项内设置head，且脚本路径无需写~/node_modules，Nuxt 会自动解析 node_modules：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: '/node_modules/preline/dist/preline.js',
          body: true,
          defer: true
        }
      ]
    }
  },
  modules: ['@nuxtjs/tailwindcss']
})

4. 客户端初始化 Preline #

Preline 需要在客户端侧手动初始化，推荐通过 Nuxt 插件实现（创建plugins/preline.client.ts文件）：

import { initTE } from 'preline'

export default defineNuxtPlugin(() => {
  if (process.client) {
    initTE({ allowReinits: true })
  }
})

也可直接在app.vue中添加初始化逻辑：

<script setup>
import { onMounted } from 'vue'
import { initTE } from 'preline'

onMounted(() => {
  initTE({ allowReinits: true })
})
</script>

原配置失效原因 #

• Nuxt3 不再支持 Nuxt2 的顶级head配置，原脚本未被正确注入页面
• Tailwind 的content仅包含 Preline 文件，未覆盖项目自身组件/页面，导致样式无法生成
• Preline 未在客户端初始化，交互类组件（如下拉菜单、模态框）无法正常工作

内容的提问来源于stack exchange，提问作者JMKelley