NX Angular项目中Flowbite Data Attributes无法生效求助

问题描述 #

在Nx Angular项目中使用Tailwind + Flowbite时，所有不依赖data属性的功能正常，但像快速拨号这类依赖data属性的组件无法展开。怀疑Tailwind配置的content部分存在问题，相关配置如下：

现有Tailwind content配置 #

content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
    './node_modules/flowbite/**/*.js',
  ],

package.json依赖 #

"flowbite": "^1.6.3",

project.json脚本配置 #

"scripts": ["node_modules/flowbite/dist/flowbite.min.js"]

完整Tailwind配置文件 #

const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

// Todo Create a shared tailwind config

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
    './node_modules/flowbite/**/*.js',
  ],
  darkMode: 'class',
  theme: {
    container: {
      center: true,
      padding: '1rem',
    },
    extend: {
      colors: {
        current: 'currentColor',
        transparent: 'transparent',
        white: '#FFFFFF',
        black: '#090E34',
        dark: '#1D2144',
        primary: '#4A6CF7',
        yellow: '#FBB040',
      },
      // This is all from fuse theme
      boxShadow: {
        signUp: '0px 5px 10px rgba(4, 10, 34, 0.2)',
        image: '0px 3px 30px rgba(9, 14, 52, 0.1)',
        pricing: '0px 7px 35px rgba(180, 189, 223, 0.4)',
      },
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
      opacity: {
        12: '0.12',
        38: '0.38',
        87: '0.87',
      },
      rotate: {
        '-270': '270deg',
        15: '15deg',
        30: '30deg',
        60: '60deg',
        270: '270deg',
      },
      scale: {
        '-1': '-1',
      },
      transitionDuration: {
        400: '400ms',
      },
      transitionTimingFunction: {
        drawer: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
    require('flowbite/plugin'),
    require('flowbite-typography'),
  ],
};

修复步骤 #

1. 更新Tailwind content配置
   Flowbite的交互组件依赖的data属性定义在其HTML模板文件中，当前配置只扫描了Flowbite的JS文件，需要添加HTML文件路径：

content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
    './node_modules/flowbite/**/*.{js,html}', // 新增html后缀
  ],

2. 验证Flowbite JS加载
   确认project.json中的脚本配置已正确引入Flowbite的JS文件，确保构建时该文件被打包进项目。

3. 清除缓存并重新构建
   执行Nx构建命令清除Tailwind缓存并重新编译项目：

nx build your-project-name

4. 检查Angular模板属性
   确保组件模板中的data属性（如data-collapse-toggle）未被Angular模板编译器移除，Angular默认不会处理这类属性，但若有自定义模板逻辑需排查。

5. 更新Flowbite版本（可选）
   若上述步骤无效，尝试更新Flowbite到最新版本，解决旧版本与Nx/Angular的兼容问题：

npm install flowbite@latest

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