Tailwind CSS React - Flowbite

React is one of the most popular front-end libraries in the world used by websites such as Facebook, Instagram, Yahoo Mail, Dropbox, and more built by the Meta (formerly Facebook) company.

Coupled with Tailwind CSS and the React components from Flowbite you will be able to develop applications faster than ever based on the Flowbite React library using advanced theming functionalities and React specific components and methodologies.

Create a React project #

The latest recommended way of creating a new React application is to use a front-end tooling software such as Vite or Parcel since the React docs no longer recommends the create-react-app repository.

Using the CLI #

Run the following command to scaffold a new Flowbite React project using Vite:

npm create flowbite-react@latest -- --template vite

Running this will create a new folder with all the necessary files for a React project with Flowbite.

Using Vite React #

Create a new React project using Vite by running the following two commands:

npm create vite@latest my-project -- --template react-ts
cd my-project

Now that the project has been created you can start a local development server by running npm run dev and use the npm run build command to create an optimized build for production use.

Install Tailwind CSS #

1. Install Tailwind CSS by running the following two commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure the template paths inside the tailwind.config.js file:

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Set up the Tailwind directives inside the ./src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now that you have installed Tailwind CSS you can proceed by setting up Flowbite React.

Install Flowbite React #

Flowbite React is an open-source set of interactive React components based on the Tailwind CSS utility-first framework featuring interactive elements such as modals, navbars, dropdowns, carousels, and more.

4. Install Flowbite react by running the following command in your terminal:

npm install flowbite-react

5. Import Flowbite React and add the plugin and the content path inside your tailwind.config.js file:

const flowbite = require("flowbite-react/tailwind");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    flowbite.content(),
  ],
  plugins: [
    // ...
    flowbite.plugin(),
  ],
};

Congratulations! You have successfully now installed all of the required dependencies so you are now ready to start building websites using Tailwind CSS, React and Flowbite.

React components #

You can check out the whole collection of Flowbite components built with React and Tailwind CSS by checking out the GitHub repository and the Flowbite React official documentation.

Starter templates #

Use the following open-source starter templates that already have Tailwind CSS, React and Flowbite configured so you can get started with your project right away:

• Flowbite React Template on GitHub
• Flowbite React Template on StackBlitz

More examples #

You can also check out the pro version of Flowbite to get access to over 300+ blocks, templates and an admin dashboard coded with Flowbite React and Tailwind CSS.