PrelineUI 插件无法工作，导致一些使用 JavaScript 的组件无法工作

Question

我目前正在使用最新的@astrojs/tailwind 集成。我还安装了 PrelineUI 导航组件，该组件适用于通过 PrelineUI 插件注入的 JavaScript。 现在的主要问题是使用 Preline JavaScript 的组件无法工作。例如。汉堡菜单。我尝试阅读并实现文档中给出的所有说明，但仍然无法使汉堡包或任何其他使用 Preline JavaScript 的组件正常工作。

这是原始的 -

标题导航组件 这是一个示例 Codesandbox - 尝试单击汉堡菜单或任何下拉菜单 [Codesanbox 链接] (https://codesandbox.io/p/sandbox/gallant-wind-itec94?file=%2Ftailwind.config.cjs%3A10 %2C38)

这是我的

tailwind.config.cjs文件

/** @type {import('tailwindcss').Config} */

const preline = require('preline/plugin.js');

module.exports = {
    content: [
        './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
        './public/**/*.astro',
        'node_modules/preline/dist/*.js',
    ],
    theme: {
        extend: {},
    },

    plugins: [preline],
};

这是我的

package.json 文件

{
    "name": "funny-orbs-2023",
    "type": "module",
    "version": "0.0.1",
    "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview",
        "astro": "astro"
    },
    "dependencies": {
        "@astrojs/tailwind": "^3.1.2",
        "@fontsource/inter": "^4.5.15",
        "@fontsource/inter-tight": "^4.5.2",
        "@preline/dropdown": "^1.3.0",
        "astro": "^2.4.5",
        "preline": "^1.8.0",
        "tailwindcss": "^3.3.2"
    }
}

有人可以帮我解决这个问题吗？几天来我一直在试图解决这个问题。预先感谢。

Answer 1

Preline 文档中的

<script>

 标签看起来不正确：

<script is:inline src="./assets/vendor/preline/dist/preline.js"></script> 该标签不需要

is:inline

 指令，并且文件路径不存在。

<script>

标签应如下所示：

<script src="../../node_modules/preline/dist/preline.js"></script> 文档：

• 在 Astro 中使用脚本
• is:inline

Answer 2

在文件 tailwind.config.mjs 中

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
        './node_modules/preline/preline.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [
        // require('@tailwindcss/forms'),
        require('preline/plugin'),
    ],
}

他们添加了线路输出标签：

就是这样，它应该适合你