Configuring Tailwindcss for Laravel

Every time I needed to config tailwindcss for a laravel project I always google search on how to config tailwindcss for laravel.
So, I came up with the idea of writing a blog to document for myself.

Create Laravel a New Laravel Project

laravel new [name of project]

install Composer packages

composer install

Install npm Packages

npm install

From here on we start configuring tailwindcss for laravel

Install tailwind

npm install tailwindcss

Generate tailwind configuration file

npx tailwindcss init

add the purge file directory and i added Mode to use JIT(Just-in-Time). I mostly use jit because I love generating my styles on-demand.

configure tailwind with laravel mix

you need to require tailwind in laravel-mix

Include tailwind in your CSS

open ./resources/css/app.css and include tailwind

Import styles to your blade file

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

Run npm watch

npm run watch

you should see this

you can now start adding your classes to your html elements. Your styles will with jit(just-in-time) compiler