How to use Tailwind CSS with Laravel

onlinecode

2 years ago

How to use Tailwind CSS with Laravel

In this post we will give you information about How to use Tailwind CSS with Laravel. Hear we will give you detail about How to use Tailwind CSS with Laravel And how to use it also give you demo for it if it is necessary.

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.

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";

Also see: 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 - onlinecode</title>

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

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

        <script src="{{ mix('js/app.js') }}"></script>
    </head>
    <body >
        <div >
            <div >
                <h1 >Tailwind Laravel onlinecode</h1>
                <form >
                    <div >
                        <label  for="username">
                            Username
                        </label>
                        <input  id="username" type="text" placeholder="Username">
                    </div>
                    <div >
                        <label  for="password">
                            Password
                        </label>
                        <input  id="password" type="password" placeholder="******************">
                    </div>
                    <div >
                        <button  type="button">
                            Sign In
                        </button>
                    </div>
                    <a  href="#">
                        Forgot Password?
                    </a>
                </form>
                <div >
                    <a  href="https://onlinecode.org/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.

How to use Tailwind CSS with Laravel

Create Laravel Project

Install Tailwind via NPM

Add Tailwindcss to resources/sass/app.scss

Create your Tailwind config file

Include Tailwind in Laravel Mix Build Process

Run NPM

Add Tailwindcss to `resources/sass/app.scss`