TheLazy.Dev
Portfolio GitHub

Blog

laravel |tailwindcss |tutorial |opensource

How to install Flowbite and Tailwind CSS with Laravel

zoltanszogyenyi

Zoltán Szőgyényi

Posted on January 17, 2022

How to install Flowbite and Tailwind CSS with Laravel

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Create a Tailwind CSS config file:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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')
    ],
  }
Enter fullscreen mode Exit fullscreen mode

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"),

  ]);
Enter fullscreen mode Exit fullscreen mode

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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

<link href="/css/app.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

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

<script src="../path/to/flowbite/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

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.

Flowbite - Tailwind CSS components

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.

💖 💪 🙅 🚩
zoltanszogyenyi
Zoltán Szőgyényi

Posted on January 17, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to install Flowbite and Tailwind CSS with Laravel
laravel How to install Flowbite and Tailwind CSS with Laravel

January 17, 2022