Hello Laravel Friends,
Tailwind CSS is a popular utility first CSS framework – it is easy and fast to get started building beautiful, responsive web apps with it. If you’re developing a Laravel 8 project and want to include Tailwind CSS to it, you’re at the right place.
In this tutorial, I will walk you through step by step process of installing and set up Tailwind CSS on your Laravel 8 project.
Steps to Install Tailwind CSS in Laravel 8:
Step 1: Create a New Laravel Project
Use the below command to create a new Laravel project
composer create-project laravel/laravel:^8.0 project-name
Step 2: Go to Your Project Directory
Change your working directory to your Laravel project folder using the below command.
cd project-name
Step 3: Install Tailwind CSS
You can install Tailwind CSS using npm. Run the following command to install Tailwind CSS and its dependencies:
npm install tailwindcss
Step 4: Create a Tailwind CSS Configuration File
Laravel Mix simplifies the process of compiling CSS and JavaScript. To configure Tailwind CSS with Laravel Mix, you need to create a Tailwind CSS configuration file and a Laravel Mix configuration file.
Generate a tailwind.config.js file using the following command:
npx tailwindcss init
This will create a basic configuration file in your project root.
Step 5: Install Laravel Mix Dependencies
If you haven’t already installed Laravel Mix and its dependencies, you can do so with npm:
npm install laravel-mix cross-env --save-dev
Step 6: Configure Laravel Mix
Next, open the webpack.mix.js file in your Laravel project’s root directory. Add the following code to configure Laravel Mix to process Tailwind CSS:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
Make sure the paths match your project’s file structure if they are different.
Step 7: Compile Assets
Now, you can compile your assets by running the following command:
npm run dev
This will compile your CSS and JavaScript files and place them in the public directory.
Step 8: Include Compiled CSS in Your Blade Views
Finally, include the compiled CSS in your Blade views. Open the resources/views/layouts/app.blade.php file and add the following line inside the <head> section:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
This will include the compiled Tailwind CSS in your Laravel project.
Step 9: Run Your Laravel Development Server
Start your Laravel development server to see the changes:
php artisan serve
Your Laravel project with Tailwind CSS should now be up and running. You can start building your user interfaces using Tailwind CSS classes.
Conclusion:
Congratulations! You have Tailwind CSS inside your Laravel 8 project. With power under the hood in the form of their utility classes, you can now create beautiful, responsive web applications with less effort and code.
Install Tailwind CSS in your Laravel 8 project by hiring the Laravel Developer.
Happy Coding!
