Larntocode is a collection of tutorials that will help you learn how to code. We cover a wide range of topics such as web development, machine learning, and data science. We also have a blog where we share our thoughts on the latest trends in technology.

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

2. Require Flowbite as a plugin inside the tailwind.config.js file:

module.exports = {
  plugins: [require("flowbite/plugin")],
};

3. Include the main JavaScript file to make interactive elements work:

<script src="../path/to/flowbite/dist/flowbite.js"></script>

4. Additionally to your own content data you should add flowbite to apply the classes from the interactive elements in the tailwind.config.js file:

module.exports = {
  content: ["./node_modules/flowbite/**/*.js"],
};

If you use Webpack or other bundlers you can also import it like this:

import "flowbite";

Include via CDN #

The quickest way to get started working with FlowBite is to simply include the CSS and JavaScript into your project via CDN.

Require the following minified stylesheet inside the head tag:

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/flowbite.min.css"
/>

And include the following JavaScript file before the end of the body element:

<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

Tailwind CSS 2.0 #

Flowbite works with the 2.x version of Tailwind CSS.

Tailwind CSS 3.0 #

Feel free to upgrade to version 3 of Tailwind CSS as there are no breaking changes when using the components from Flowbite.

Next.js #

If you’re using React as a front-end library and Next.js as a framework you can also use the components from Flowbite React such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.