Install tailwindcss in Laravel 11

This guide will show you how to add Tailwind CSS to your Laravel project. Let's get started with the simple steps to integrate Tailwind CSS into your Laravel project.

Install Tailwind CSS and its dependencies

This command installs Tailwind CSS along with PostCSS and Autoprefixer as dev dependencies.

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS configuration

This command initializes a tailwind.config.js file in your project root, where you can customize Tailwind's settings

npx tailwindcss init -p

Initialize Tailwind CSS configuration

Modify your tailwind.config.js file to include the paths to your Blade templates, JavaScript files, and Vue components:

/** @type {import('tailwindcss').Config} */

export default {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

Integrate Tailwind CSS into your application

In your HTML file (resources/views/welcome.blade.php), you can include Tailwind's styles by referencing your CSS file generated by Tailwind.

@vite('resources/css/app.css')

Compile your assets

Run the following command to compile your CSS file:

npm run dev

By following the steps we discussed, you can now style your Laravel 11 project efficiently with the tailwindcss.