Laravel 9中安装Tailwind Elements：tw-elements导入文件位置

一、前置条件 #

确保你的Laravel 9项目已经完成Tailwind CSS的基础配置。

二、安装Tailwind Elements #

1. 通过npm安装依赖包：

npm install tw-elements

2. 修改tailwind.config.js配置文件，将Tailwind Elements的文件路径加入content数组，同时注册官方插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./node_modules/tw-elements/dist/js/**/*.js" // 新增该行
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tw-elements/dist/plugin.cjs")],
}

三、导入tw-elements的正确位置 #

方式1：全局导入（适合全项目使用） #

打开项目的JavaScript入口文件resources/js/app.js，在文件末尾添加导入语句：

import 'tw-elements';

执行编译命令生效：

npm run dev

最后确保你的Blade模板中引入了编译后的JS文件，通常是：

<script src="{{ asset('js/app.js') }}"></script>

方式2：按需导入（推荐，减小打包体积） #

如果仅需使用部分组件，可在具体的JS文件或组件中单独导入所需模块：

import { Tooltip, Toast } from 'tw-elements';

然后在页面加载时初始化组件：

document.addEventListener('DOMContentLoaded', () => {
  const tooltip = new Tooltip(document.getElementById('my-tooltip'));
});

四、验证安装 #

在Blade模板中添加测试组件，比如 tooltip：

<button type="button" class="btn btn-primary" data-te-toggle="tooltip" title="Tooltip example">
  悬停查看提示
</button>

执行npm run dev后刷新页面，测试组件是否正常工作。

内容的提问来源于stack exchange，提问作者Abu Bakar BSA