DEV Community 👩‍💻👨‍💻

Cover image for Configuring Tailwindcss for Laravel
Jimlah
Jimlah

Posted on

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]
Enter fullscreen mode Exit fullscreen mode

install Composer packages

composer install
Enter fullscreen mode Exit fullscreen mode

Install npm Packages

npm install
Enter fullscreen mode Exit fullscreen mode

From here on we start configuring tailwindcss for laravel

Install tailwind

npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

Generate tailwind configuration file

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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.
image1

configure tailwind with laravel mix

you need to require tailwind in laravel-mix
Image2

Include tailwind in your CSS

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

Image3

Import styles to your blade file

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

Run npm watch

npm run watch
Enter fullscreen mode Exit fullscreen mode

you should see this
Image4

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.