How to use Tailwind CSS with Laravel - TechvBlogs

How to use Tailwind CSS with Laravel

Tailwind is a modern CSS framework that provides a unique set of utility classes making the development process easier.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

2 years ago

TechvBlogs - Google News

Tailwind is a modern CSS framework. It is a utility-first-based framework and provides you with a unique set of utility classes which makes the development process very easy and results in making a unique design. Utility-first CSS is fast, robust, and very efficient making your coding hassle-free. Tailwind CSS is also not opinionated; it means you are totally free to customize the design lament and website's component.

Tailwind is a power pack of everything you need to create a website without writing any custom CSS.

Laravel is a complete framework for application development. It is an open-source PHP framework in which development is robust and easy. Most importantly it is easy to maintain the quality of code while using Tailwind CSS with Laravel when compared to custom CSS.

Installing the Tailwind framework is not simple as installing a bootstrap framework, it requires a little bit of configuration long with laravel Mix.

In this blog, We will learn how we can install a tailwind framework inside our laravel project.

How to use Tailwind CSS with Laravel - TechvBlogs

Create Laravel Project

First, open Terminal and run the following command to create a fresh Laravel project:

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

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new tailwind-laravel

Install Tailwind via NPM

First, let's install NPM dependencies

npm install

Now install Tailwind CSS via npm

npm install tailwindcss

Add Tailwindcss to resources/sass/app.scss

You don't have to install autoprefixer or postcss-import, because it's already installed with laravel mix.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Read Also:  SPA Authentication using Laravel Sanctum and Vue.js

Create your Tailwind config file

Next up, we need to generate a tailwind config file, This fill will be used by laravel mix (webpack) while converting the scss file into CSS.

Run the following command to generate the config file.

npx tailwindcss init

Include Tailwind in Laravel Mix Build Process

Next up, we need to tell Laravel Mix (which internally uses webpack) to compile tailwind sass using the tailwind configuration file.

Open the  webpack.mix.js file and make the following changes.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
    
const tailwindcss = require('tailwindcss')

mix.sass('resources/sass/app.scss', 'public/css')
   .options({
      processCssUrls: false,
      postCss: [ tailwindcss('tailwind.config.js') ],
})

Open the resources/views/welcome.blade.php file and make the following changes.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel + Tailwind CSS - TechvBlogs</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <script src="{{ mix('js/app.js') }}"></script>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            <div class="w-full max-w-xs">
                <h1 class="text-center text-2xl mb-3">Tailwind Laravel TechvBlogs</h1>
                <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                            Username
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                            Password
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
                    </div>
                    <div class="mb-2">
                        <button class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
                            Sign In
                        </button>
                    </div>
                    <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
                        Forgot Password?
                    </a>
                </form>
                <div class="text-center">
                    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="https://techvblogs.com/blog/tailwind-css-with-laravel?ref=code" target="_blank">Read Blog</a>
                </div>
            </div>
        </div>
    </body>
</html>

Run NPM

We are now ready to run the npm build process, run the following command in your terminal / command-line

npm run dev

Now, it's time to run our project.

php artisan serve

Thank you for reading this blog.

Read Also:  Firebase Push Notification Laravel Tutorial

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.

 

Comments (0)

Comment


Note: All Input Fields are required.