How to Use Tailwind CSS in Laravel 10 For Interactive Designs

Tailwind CSS is a popular utility-first CSS framework. It provides a set of highly customizable CSS classes to help you build modern and responsive web interfaces quickly. Unlike traditional CSS frameworks that come with pre-designed components. Tailwind CSS focuses on providing a wide range of utility classes that you can use directly in your HTML markup to style your elements. You can use Tailwind UI to make more elegant UI screens. Most of you guys prefer using Bootstrap for creating your webpage designs. But, you can use Tailwind as it is very simple to set up in your project. Today, in this post, I will show, how you can install and use Tailwind CSS in Laravel 10 projects.

Prerequisites

We are going to install and use Tailwind CSS in Laravel 10. Hence, it is recommended to have a Laravel 10 application setup to proceed with this post.

For having a Laravel 10 application, you will require the below tools and configurations.

• PHP >=8.1
• Composer
• Apache/Nginx Server
• VS Code Editor (Optional)
• MySQL (version > 5) and
• npm

If you are ready with the configurations, let’s continue with this post.

Step 1 – Laravel Project Setup for Tailwind CSS

Open the terminal and hit the below command for creating a Laravel project.

composer create-project --prefer-dist laravel/laravel laravel-tailwind

The above will take a couple of seconds to have a brand new Laravel 10 project setup.

Next, you have to configure the database.

How to Create and Use Custom Helper Function in Laravel 10

Step 2 – Configure Database in Laravel

For having a database connection, make sure you have a database ready in MySQL for this post. If not then let’s create one.

CREATE DATABASE laravel_tailwind

Now, come back to the project folder and look at the .env file. Search for the database section and add the DB credentials as shown below.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_tailwind
DB_USERNAME={{ DATABASE_USERNAME }}
DB_PASSWORD={{ DATABASE_PASSWORD }}

Make sure, you have updated the correct DB username and password.

Next, we will be installing Tailwind CSS in Laravel.

Step 3 – Install Tailwind CSS in Laravel 10

Tailwind CSS is a front-end library for creating user interfaces. Hence, you will be able to install it using the npm. Hence, inside the project folder, hit the below command.

npm install -D tailwindcss postcss autoprefixer

The command will install the Tailwind CSS library.

The library is installed. But in order to manage the configuration settings, it is required to have a config file. Hence, let’s create it.

Step 4 – Create Tailwind Configuration File in Laravel

For creating a Tailwind config file in the project, you will need to hit the below command.

npx tailwindcss init -p

On successful execution of the command, you will have the below response.

Next, you need to add a few configurations for linking the Tailwind library for the front-end work. Hence, let’s move to the next step.

Get the Last Inserted Id in Laravel 10 Using Different Methods

Step 5 – Add Configuration For Front-End Template Path

Navigate to the tailwind.config.js file and add the below lines in the content array. After adding, the config file will look as shown below.

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Take a look at the screenshot as well.

Now, in the next step, you will need to add the tailwind directive to the CSS file.

Step 6 – Add Tailwind Directive to CSS

For adding the Tailwind directive to the CSS file, you will have to navigate to the resources/css/app.css file. Then add the tailwind directive as shown below.

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

Still, you won’t be able to use CSS without the build. So, let’s move to the next step.

Step 7 – Start Build Process of Tailwind CSS

The tailwind CSS won’t be applied until you build the front-end dependencies. Hence, you will have to run the below command.

npm run dev

After hitting this command, you will be able to see the terminal response as shown below.

Here, Vite started the build process. Before moving further, let’s talk about Vite if you are not familiar with this.

Vite is a build tool and development server designed for modern web development, specifically for building JavaScript-based applications. It focuses on providing a fast and efficient development experience by leveraging native ES modules (ESM) in modern browsers during development.

Now, we are done with the installation and configuration of Tailwind CSS in Laravel. So, let’s start using this in our project.

Start Using Tailwind CSS in Project Blade File

At the very first, you will need to create a blade file to test the result. Therefore, I have created a blade file named master.blade.php in the views folder.

After creating the file, you need to add the below snippet.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')
</head>

<body>
    <div class="container mx-auto border-2 border-purple-500 my-20">
        <h1 class="text-5xl text-center py-10 font-black text-purple-900"> Tailwind CSS in Laravel 10 </h1>
        <h1 class="text-2xl text-center pb-10 font-black text-blue-900"> Programming Fields </h1>
    </div>
</body>

</html>

Here, I have imported Tailwind CSS which is already used in the resources/css/app.css file.

Auth Scaffolding Using Jetstream with Intertia Js in Laravel 10

Create a Route to Render a View

As of now, I am not going to create any controller in order to render the view. However, I can add it directory in the web route. So, let’s add it quickly.

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function() {
    return view('master');
});

We are ready to run the application to see the result.

Check Result

Now, this is the time to check the result of added blade snippet. Run the application using the serve command.

php artisan serve

The application is started running. Therefore navigate to the browser and check the result.

Here, we used typography and color classes provided by Tailwind. You can see the CSS is applied properly.

So, that’s it for this post. In the upcoming posts, will come up with more use of Tailwind CSS in the project.