How to install Flowbite and Tailwind CSS with Laravel
Tags: laravel, tailwindcss, tutorial, opensource
Published: 2022-01-17 12:18:40

In this guide you will learn how to install and work with Laravel, Tailwind CSS, and Flowbite.

[Flowbite](https://flowbite.com) is a popular open source component library built on top the utility-first Tailwind CSS framework including UI components such as dropdowns, modals, buttons, and more.

Laravel is the most popular PHP web framework based on the model-view-controller (MCV) model that helps you build modern web applications and API's.

## Install Tailwind CSS with Laravel

Follow the next steps to install Tailwind CSS and Flowbite with Laravel Mix.

Make sure that you have <a href="https://getcomposer.org/" target="_blank" rel="nofollow">Composer</a> and <a href="https://nodejs.org/en/" target="_blank" rel="nofollow">Node.js</a> installed locally on your computer.

Require the Laravel Installer globally using Composer.

```bash
composer global require laravel/installer
```

Make sure to place the vendor bin directory in your PATH. Here's how you can do it based on each OS:

- macOS: `export PATH="$PATH:$HOME/.composer/vendor/bin"`
- Windows: `set PATH=%PATH%;%USERPROFILE%\AppData\Roaming\Composer\vendor\bin`
- Linux: `export PATH="~/.config/composer/vendor/bin:$PATH"`

Create a new project using Laravel's CLI:

```bash
laravel new awesome-project

cd awesome-project
```

You can now access the Laravel application on `http://localhost:8000`.

This command will initialize a blank Laravel project that you can get started with.

Install Tailwind CSS and Flowbite using NPM:

```javascript
npm install -D tailwindcss postcss autoprefixer flowbite
```

Create a Tailwind CSS config file:

```bash
npx tailwindcss init
```

A new `tailwind.config.js` file will be created inside your root folder.

Add the view paths and require Flowbite as a plugin inside `tailwind.config.js`:

```javascript
module.exports = {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
      "./node_modules/flowbite/**/*.js"
    ],
    theme: {
      extend: {},
    },
    plugins: [
        require('flowbite/plugin')
    ],
  }
```

Add Tailwind CSS to your Laravel Mix configuration by requiring it inside the `webpack.mix.js` file:

```javascript
mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [

    // add here
    require("tailwindcss"),

  ]);
```

Add the directives inside the `./resources/css/app.css` file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Include the `app.css` file inside the `<head>` tag of your view templates:

```html
<link href="/css/app.css" rel="stylesheet">
```

Require the `flowbite.js` file before the end of the `<body>` tag:

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

Alternatively, you can also include the JavaScript file using CDN:

```html
<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.js"></script>
```

Now that you've set everything up start up a local development server using `php artisan serve` and run the build process for Webpack by using `npm run watch`.

## Flowbite components

Now that you have successfully installed the project you can start using the [UI components from Flowbite](https://flowbite.com/docs/getting-started/introduction/) and Tailwind CSS to develop modern websites and web applications.

![Flowbite - Tailwind CSS components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qntpacwojs9ydkgbscwz.png)

We recommend exploring the components using the search bar navigation (`cmd` or `ctrl` + `k`) or by browsing the components section of the sidebar on the left side of this page.

This guide is based on the official [Tailwind CSS Laravel](https://flowbite.com/docs/getting-started/laravel/) documentation from Flowbite.