Zoltán Szőgyényi for Themesberg

Posted on Jan 17, 2022 • Edited on Feb 2, 2022 • Originally published at flowbite.com

How to install Flowbite and Tailwind CSS with Laravel

#laravel #tailwindcss #tutorial #opensource

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

Flowbite 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 Composer and Node.js installed locally on your computer.

Require the Laravel Installer globally using Composer.

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:

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:

npm install -D tailwindcss postcss autoprefixer flowbite

Create a Tailwind CSS config file:

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:

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:

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:

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

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

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

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

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

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

<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 and Tailwind CSS to develop modern websites and web applications.

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 documentation from Flowbite.

Top comments (4)

Dave L • Mar 5

Question: How do you configure Flowbite to export the final dist version of the JS file? In your example, you have it set to "../path/to/flowbite/dist/flowbite.js". However, I do not see how you configured that. Thanks for your help!