TheLazy.Dev
Portfolio GitHub

Blog

laravel |vite |tailwindcss |tutorial

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

sureshramani

Suresh Ramani

Posted on September 20, 2022

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

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

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

laravel new laravel9-tailwind3-vite3
Enter fullscreen mode Exit fullscreen mode

Step 2: Setup Tailwind CSS

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

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Tailwind CSS to app.css

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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,
        }),
    ],
});
Enter fullscreen mode Exit fullscreen mode

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

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

Step 5: Run Vite Development Server

Run the following command to start the Vite Development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Step 6: Run Laravel Development Server 

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this blog.

💖 💪 🙅 🚩
sureshramani
Suresh Ramani

Posted on September 20, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

September 20, 2022