[SOLVED] how to use Flowbite in angular project?

Question

This Content is from Stack Overflow. Question asked by Hossein Bajan

I want to use Flowbite in my project.I did the following steps but it still doesn’t work.

  1. I installed the tailwind first, Tailwind is working fine now.
  2. Then I installed Flowbite using npm, and add Flowbite as a plugin inside the tailwind.config.js file. Base on this link:
    https://flowbite.com/docs/getting-started/quickstart/

    npm i flowbite

tailwind.config.js file
‍‍‍‍‍

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')]
}

angular.js file
‍‍‍‍‍

"architect": {
   "build": {
     "options": {
        "scripts": ["node_modules/flowbite/dist/flowbite.js"]
     },
}

I even used the package below, but it still doesn’t work.

flowbite-angular

https://www.npmjs.com/package/flowbite-angular

Solution

You can use flowbite-angular as a starting point building user interfaces and websites because it is an open source collection of UI components created in Angular and using utility classes from Tailwind CSS.

Getting started

You only need to set up flowbite normally and install flowbite-angular from npm to use flowbite-angular.

An existing Tailwind CSS project can use flowbite as a plugin.

Require via npm

Make sure that you have Node.js and Tailwind CSS installed.

  1. Install flowbite as a dependency using npm by running the following command:
npm i flowbite flowbite-angular
  1. Require flowbite as a plugin inside the tailwind.config.js file:
module.exports = {
  plugins: [require('flowbite/plugin')],
};

For more tutorials visit Jtuto.com


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 4.0.

people found this article helpful. What about you?