Get your next remote job on LaraJobs.
Laravel Tailwind CSS

Add Tailwind CSS to any Laravel project

Benjamin Crozat
Published on Oct 5, 2023 0 comments Edit on GitHub
Add Tailwind CSS to any Laravel project

Introduction to Tailwind CSS in Laravel

Tailwind CSS is a great CSS framework based on the utility-first approach. I wrote extensively about it already (Tailwind CSS: the ultimate guide to get started) if you want to get up to speed.

Let’s see how easy it is to add it in your Laravel project.

How to add Tailwind CSS to any Laravel project

Create a new Laravel project with Jetstream

If needed, you can create a new Laravel using Jetstream, which sets your frontend with Tailwind CSS and the JavaScript framework of your choice.

laravel new example --jet

Once you run npm install and npm run dev, using Tailwind CSS is a breeze!

Add Tailwind CSS in Laravel via NPM/Yarn/Bun

If you are not creating a new Laravel project, you should leverage your JavaScript package manager, no matter if it’s NPM, Yarn, or Bun.

Tailwind CSS requires other dependencies such as PostCSS, and one of its plugins called autoprefixer. Actually, Tailwind CSS itself is a PostCSS plugin.

If you are using NPM, run the following command:

npm install autoprefixer postcss tailwindcss

If you are using Yarn:

yarn add autoprefixer postcss tailwindcss

If you are using Bun:

bun add autoprefixer postcss tailwindcss

Publish Tailwind’s configuration file in your Laravel codebase

Tailwind CSS is an extremely customizable framework. You will also need to configure where it should look to purge all its unused classes in order to slim down your final file size.

If you are using NPM, run the following command:

npx tailwindcss init -p

If you are using Yarn:

yarn tailwindcss init -p

If you are using Yarn:

bun run tailwindcss init -p

Here’s what your newly generated tailwind.config.js file should look like:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

The ìnit command also generated another config file, postcss.config.js*, that instructs PostCSS to use Tailwind CSS and autoprefixer:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Add Tailwind’s directives to your CSS

In resources/css/app.css, add the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;
/* This one is not necessary. Tailwind will 
automatically inject it at compile time. */
@tailwind variants;

Tailwind CSS will now add its utility classes in your final app.css file whenever you are compiling your project.

Compile your project with Tailwind CSS

Using Vite, Laravel offers by default to compile your assets using two commands.

This one allows you to automatically refresh your browser whenever you make a change to a file:

If you are using NPM, run the following command:

npm run dev

If you are using Yarn:

yarn dev

If you are using Bun:

bun run dev

And this one lets you compile your CSS (and JavaScript) for production:

If you are using NPM, run the following command:

npm run build

If you are using Yarn:

yarn build

If you are using Bun:

bun run build

Enable Tailwind CSS by linking your CSS in your webpage

Laravel exposes a new Blade directive called @vite. It lets you automatically add the necessary link HTML tag to style your webpage:

<!DOCTYPE html>
<html>
    <head>
        …
		
        @vite('resources/css/app.css')
    </head>
    <body>
        …
    </body>
</html>

That’s it, you’re now done with the boring work. Go build something great!

Wait, there's more!

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -