FlowBite Logo Flowbite
Pricing

Tailwind CSS Laravel - Flowbite

Learn how to install Tailwind CSS with Flowbite in a Laravel PHP project and start building modern websites with the most popular PHP framework in the world

Laravel is the most popular free and open-source PHP web framework that helps you build modern web applications and API’s based on a model-view-controller (MVC) programming architecture. It’s an iteration of the Symfony framework and it’s being used by millions of developers and companies around the world.

Check out this guide to learn how to set up a new Laravel project together with Tailwind CSS and the UI components from Flowbite to enhance your front-end development workflow.

Install Tailwind CSS with Laravel #

Make sure that you have Composer and Node.js installed locally on your computer.

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

  1. 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"
  1. Create a new project using Laravel’s CLI:
laravel new awesome-project

cd awesome-project

Start the development server using the following command:

php artisan serve

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.

  1. Install Tailwind CSS and Flowbite using NPM:
npm install -D tailwindcss postcss autoprefixer flowbite
  1. Create a Tailwind CSS config file:
npx tailwindcss init -p

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

  1. 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')
    ],
  }

This will tell the compiler from Tailwind what files to look for to properly apply the classes inside the final CSS file and it will also install the extra plugin options from Flowbite.

  1. Add the directives inside the ./resources/css/app.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Make sure your compiled CSS and JS is included in the <head> then start using Tailwind’s utility classes to style your content.
@vite(['resources/css/app.css','resources/js/app.js'])
  1. Import the Flowbite JavaScript package inside the ./resources/js/app.js file to enable the interactive components such as modals, dropdowns, navbars, and more.
import 'flowbite';

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
  1. Run the build process for Vite using npm run dev. Use npm run build for production builds.

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.