Tailwind（flowbite）弹出窗口显示黑屏

8 浏览
0 Comments

Tailwind（flowbite）弹出窗口显示黑屏

我正在使用laravel中的flowbite和tailwind构建一个仪表板，但是我在处理弹出窗口时遇到了困难。

我正在使用flowbite的弹出窗口模型，但是当我将代码复制粘贴到我的项目中并尝试切换弹出窗口时，只会显示一个黑屏。

下拉菜单、工具提示等都能正常工作，几乎所有其他组件也是如此。

我还尝试了从flowbite中获取其他弹出窗口模型，但其他模型根本不显示，所以我认为我的配置肯定有问题。

这是我想要使用的弹出窗口模型：


      
        
        
你确定要删除这个产品吗？

这是我的webpack.mix文件：

const mix = require('laravel-mix');
require('laravel-mix-tailwind');
mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
if (mix.inProduction()) {
  mix
   .version();
}

这是我的tailwind config.js文件：

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
    "/node_modules/flowbite/**/*.js",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
    require('@tailwindcss/custom-forms'),
    require('flowbite/plugin')
  ]
}

另外，我已经通过npm安装了tailwind，并在我的app.js中导入了flowbite js文件，如下所示：

require('../../node_modules/flowbite/dist/flowbite.js');

一切都能正常工作，但这些弹出窗口让我发疯。有人知道它们出了什么问题吗？

谢谢。

0