CODEWITHSUNDEEP
angulartailwind-cssnrwl-nxflowbite
Ruben
Ruben

Reputation: 9186

flowbite data attributes not working in angular nx

I'm using tailwind and flowbite in my NX angular projects.
Everything works fine except the data attributes.
For example when I copy the example code for the default speed dial, the speed dial won't open.

I think this part in my tailwind config is the issue but I don't know how to fix it:

 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 config:

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

// Todo Create a shared tailwind config
// https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479

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'),
  ],
};

Upvotes: 1

Views: 864

Answers (1)

Sergey
Sergey

Reputation: 7692

I think it won't work this way. Usually, when you include a script into the page and specify a list of attributes required for a lib - they are just indicators for the scripts to setup listeners upon. So, for regular JS lib to work you need to initialize it over a finalized DOM structure. This is sorts of proven by unfinished Angular adaptation as it doesn't use any attributes and uses a Service to control accordion's collapsed state.

In case of Angular you have elements that appear on the page dynamically. Lib can't track that elements are being added.

You could try to manually call the methods for interaction as it's done in the docs for TypeScript.

Upvotes: 2

Related Questions