DEV Community

Cover image for How to install Tailwind CSS with React and Flowbite
Zoltán Szőgyényi for Themesberg

Posted on • Updated on • Originally published at flowbite.com

How to install Tailwind CSS with React and 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.

Coupled with Tailwind CSS and the components from Flowbite you will be able to develop applications faster than ever.

Install Tailwind CSS with React

Follow the next steps to install Tailwind CSS and Flowbite with Create React App.

  1. Run the following command in your terminal to create a React application, if you don't already have one:
npx create-react-app my-project
cd my-project
Enter fullscreen mode Exit fullscreen mode
  1. Install Tailwind CSS by running the following two commands:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  1. Configure the template paths inside the tailwind.config.js file:
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
  1. Set up the Tailwind directives inside the ./src/index.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  1. Install Flowbite by running the following command in your terminal:
npm install flowbite
Enter fullscreen mode Exit fullscreen mode
  1. Require Flowbite as a plugin inside your tailwind.config.js file:
module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}
Enter fullscreen mode Exit fullscreen mode
  1. Import the Flowbite JavaScript file inside your main index.js file:
import 'flowbite';
Enter fullscreen mode Exit fullscreen mode

Now you can start the server by running npm run start or build the project using npm run build.

Flowbite components in React

Most of the components from Flowbite will work seamlessly as long as you have Tailwind CSS included in your project. The interactive elements such as dropdowns, tooltips, and modals will work based on the data attributes that you can code directly in your view files.

You can start using the components from Flowbite inside your React project by only changing the class attributes to className.

Here's an example of a modal component that you can add inside your App.js file:

import './App.css';

function App() {
  return (
    <div className="App">
      <button className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" data-modal-toggle="default-modal">
        Toggle modal
      </button>

      <div id="default-modal" aria-hidden="true" className="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center h-modal md:h-full md:inset-0">
        <div className="relative px-4 w-full max-w-2xl h-full md:h-auto">

          <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">

            <div className="flex justify-between items-start p-5 rounded-t border-b dark:border-gray-600">
              <h3 className="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
                Terms of Service
              </h3>
              <button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="default-modal">
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
              </button>
            </div>

            <div className="p-6 space-y-6">
              <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
              </p>
              <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                The European Unions General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
              </p>
            </div>

            <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
              <button data-modal-toggle="default-modal" type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
              <button data-modal-toggle="default-modal" type="button" className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Decline</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

We are currently working on a standalone React project where you will be able to include these interactive elements directly as React components and programatically work with them instead of using just the data attributes.

Oldest comments (8)

Collapse
 
sm0ke profile image
Sm0ke

🚀🚀

Collapse
 
uithemes profile image
ui-themes

Looks easy. Ty!

Collapse
 
crearesite profile image
WebsiteMarket

Any hints for NextJS?

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

We're still working on a proper integration with NextJS.

Collapse
 
crearesite profile image
WebsiteMarket

🚀🚀

Collapse
 
admindashboards profile image
admin-dashboards

Thank you!
A pre-built starter for lazy guys (like me) will be appreciated.

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

We'll soon launch a starter repo with Flowbite and React.

Collapse
 
admindashboards profile image
admin-dashboards

Noted