Suresh Ramani

Posted on Sep 20, 2022 • Updated on Sep 29, 2022 • Originally published at techvblogs.com

How to Install Tailwind CSS 3 in Laravel 9 With Vite 3

#laravel #vite #tailwindcss #tutorial

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

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.

What is Vite?

Vite (the French word for "quick", pronounced /vit/ , like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Features of Vite

Instant Server Start
Lightning Fast HMR (Hot Module Replacement)
Support for TypeScript, JSX, CSS, and more.
Optimized Build
Universal Plugins
Fully Typed APIs

Laravel has just released “laravel 9.19” with a major change. There is no more webpack.mix.js file in the laravel root in the place of the webpack.mix.js file vite.config.js file is introduced.

In this article, we will install Tailwind CSS 3 in Laravel 9 with VIte 3.

How to Install Tailwind CSS 3 in Laravel 9 With Vite 3

Step 1: Install Laravel Project

Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-tailwind3-vite3

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new laravel9-tailwind3-vite3

Step 2: Setup Tailwind CSS

Next, we’d need to install tailwind and its dependencies (PostCSS & auto-prefixer).

npm install -D tailwindcss postcss autoprefixer

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p

This will create two files in your root directory: tailwind.config.js and postcss.config.js. The Tailwind config file is where you add customization and theming for your app. It is also where you tell Tailwind what paths to search for your pages and components. It looks something like this:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, you need to add a template path in tailwind.config.js.

tailwind.config.js

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

Step 3: Add Tailwind CSS to app.css

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Remove resources/css/app.css in vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Next, you need to import your CSS via JavaScript. Typically, this would be done in your application's resources/js/app.js file:

resources/js/app.js

import './bootstrap';
import '../css/app.css'

Step 4: Import Vite Assets to Laravel Blade

resources/views/welcome.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</title>

        @vite('resources/js/app.js')
    </head>

    <body class="antialiased">
        <div class="flex justify-center items-center h-screen">
            <h1 class="text-3xl text-purple-600 font-bold">How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</h1>
        </div>
    </body>

</html>