How to Use Tailwind CSS with Laravel Mix For Our New Project

In this tutorial how to use Tailwind CSS with Laravel Mix for our new web development projects we will walk you through how we can use Tailwind in our Laravel projects.

Tailwind CSS is a framework that we can use to make the development process easier using Tailwind utility classes. Its utilities can be used to make the web design process elegant and unique. With using Tailwind CSS utility-first our websites can perform much faster and the coding process also becomes errorless. While using Tailwind you don’t have to write custom rules as it’s already power packed. Laravel on the other hand, is a complete open-source PHP framework which helps developers to enjoy the development process instead of running into errors. When we use Tailwind CSS with Laravel we can easily maintain code quality without writing custom rules for CSS.

Installing Tailwind CSS in a Laravel project requires some configuration as it’s not as simple to install as BootStrap 5. In this tutorial we will use Laravel Mix instead. Let’s install Tailwind in our Laravel project

Create A New Laravel Mix Project

Let’s create a new Laravel project for examplification. We will use our terminal to do that:

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

If you have installed global composer dependency use this:

laravel new tailwind-laravel

Now use NPM dependencies to install in terminal

npm install

Use this command to install Tailwind CSS via npm

npm install tailwindcss

We need to add Tailwindcss to our resources/sass/app.scss file

There is no need for installing autoprefixer or postcss-import as it comes preinstalled with Laravel mix.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Now we have to create our Tailwind config file

Let’s generate our Tailwind config file. Laravel Mix or webpack will use it to convert SCSS file into CSS. Run this command:

npx tailwindcss init

We need to add or include Tailwind in Laravel Mix as well while building it

Now we will tell Laravel Mix to compile our Tailwind SASS using tailwind condifuration file which uses webpack internally. We will do these changes in our webpack.mix.js:

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') ],
})

Now in our blade.php file we will make these changes. You can copy the code or make changes however you want if you have followed along until now.

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

        <title>Tailwind CSS + Laravel - Laramatic</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 Laramatic</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://laramatic.com/tailwind-css-with-laravel" target="_blank">Tailwind</a>
                </div>
            </div>
        </div>
    </body>
</html>

We need to Run NPM

We will run the npm build process using this command:

npm run dev

Let’s begin using Tailwind CSS with Laravel Mix using this command.

php artisan serve