FlowBite Logo Flowbite
Pricing

Tailwind CSS Laravel - Flowbite

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

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.

Use the officially recommended Tailwind CSS utility-first framework and the UI components from Flowbite to enhance your front-end development process.

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/1.6.4/flowbite.min.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 Vite by using npm run dev or build it for production using npm run build.

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.