INTRODUCTION:
Hello, fellow developers. What’s up?, I hope you are doing fine. Welcome to this tailwind laravel exclusive tutorial, in this tutorial we will discuss how we can use tailwind css in our laravel application.
The tailwind css is a css framework & it’s created & managed by Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schogerteam.
Tailwind CSS is for generating a clean & modern user interface for your Laravel applications. It has a huge amount of class presets contained. So that you can make your laravel application more gorgeous & clean. Laravel has various front-end frameworks in the market, but tailwind css is more elegant & prominent for its versatility & simplicity.
OK, enough about tailwind css, now let’s start our main tutorial. Please follow the below steps so that you can understand what is going on and how to do that.
DOWNLOADING LARAVEL APPLICATION:
Now, Let’s start our tutorial. First, you must download a fresh copy of the Laravel application from the internet. We will use the composer command to do that. Please copy and paste the command into your terminal and hit enter.
composer create-project laravel/laravel tailwind-laravel-appINSTALLING TAILWIND CSS IN LARAVEL:
We will go to our project root directory and open a new terminal. Please copy & paste the code below and hit enter to install the package inside the terminal.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pCONFIGURING TAILWIND CSS FOR LARAVEL FRONT-END FILES:
Now at this stage, we will configure our tailwind.config.js file which is located at the root of our application. So, in this file, we will add the paths of all of our front-end view files with extensions. So that tailwind css can easily compile our view files for styling. Now copy & paste the below code into your tailwind config file.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}Import the Tailwind CSS Libraries into your CSS:
Now, we will import Tailwind CSS into all necessary libraries. To do that you have to open your resources>css>app.css file, then inside of that file copy & paste the below following code and save that file.
@tailwind base;
@tailwind components;
@tailwind utilities;COMPILING FRONTEND CSS ASSETS OF TAILWIND CSS:
Now, we will use the below npm command for compiling our tailwind css styles & also for tracking any changes to your view files.
npm run devGETTING READY THE LAYOUT FILE FOR TAILWIND CSS:
I assume you already completed the previous all steps. Now, we will add a vite directive for tailwind css compiling. You just copy & paste the following snippet into your views> layouts > app.blade.php file.
<!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>
<h1 class="text-3xl font-bold underline">
Tailwind Laravel Tutorial!
</h1>
</body>
</html>TEST THE APPLICATION:
At last, we will start our local server using our artisan command. php artisan serve If there is no problem, our code will work fine, and the project will be running now at http://127.0.0.1:8000/ or http://locahost:8000/. You can learn more from tailwind css documentation.
CONCLUSION:
Finished! That’s all about our tutorial. I’ve tried to teach you the most updated & tested things in this tutorial. Thank you so much for reading the whole tutorial from the beginning. If this tutorial helps you a little bit, then remember to share this post on social media. If you have questions, suggestions, or tips regarding this post, let us know via our Contact Us page.
