Pricing

Tailwind CSS Laravel - Flowbite

Learn how to install and set up 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

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

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

  ]);
  1. Add the directives inside the ./resources/css/app.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Include the app.css file inside the <head> tag of your view templates:
<link href="/css/app.css" rel="stylesheet">
  1. 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/[email protected]/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.

Copied code to clipboard!