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.

Initialize Tailwind CSS configuration

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

Configure Tailwind for Templates

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

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.

Compile your assets

Run the following command to compile your CSS file:

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