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