Laravel 9 How To Install Tailwind CSS in Application

Laravel is one of the most popular PHP frameworks. And Tailwind CSS is one of the most popular CSS frameworks. By combining these two tools, we gain great power for web development.

In this tutorial, we demonstrate how to install Tailwind CSS in Laravel 9 application.

Install via Laravel Breeze

Laravel 9 provides a couple of starter kits. One of them is Larave Breeze. We get Tailwind CSS automatically if we install Laravel Breeze.

Run the commands below to install Laravel Breeze:

composer require laravel/breeze --dev

Then run the commands below to finish the setup:

php artisan breeze:install
 
php artisan migrate
npm install
npm run dev

Now we should have seen a tailwind.config.js, which shows that we have installed Tailwind CSS successfully.

Install via NPM

The other way to install Tailwind CSS in Laravel 9 is via NPM.

Install Tailwind CSS package

Run the command below to install Tailwind CSS packages:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure template paths

Configure the templates files' paths in the tailwind.config.js file:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content sections should contain the paths to all the files that might use Tailwind CSS.

Add the Tailwind directives to your CSS

Add the @tailwind directives to the resources/css/app.css file:

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

Compile the CSS assets

That is all for setting up Tailwind CSS in your Laravel project, run the command below to compile and start developing using Tailwind CSS in Laravel:

npm run dev