Install Tailwind CSS 3 in Laravel 9 Using Vite 3

September 26, 2022 5 Min Read

In this tutorial we will walk you through steps to install Tailwind CSS 3 in Laravel Using Vite 3. Before digging any deeper we need to understand few CSS 3 Laravel 9 and Vite 3 basics.

Tailwind CSS 3 and Laravel 9

Tailwind CSS is a high end framework which comes with amazing utility classes to make development work a joy ride and appealing to the viewers. Since Tailwind is a utility-first framework, once you work on that you will notice utility-first CSS is much faster, resilient and what sets Tailwind CSS apart is its customization, which can be done end to end for each single component of your website. 

While Laravel 9 offers a complete package for app development, it lets you quicken your development workflow and keep the code errorless while using it with Tailwind CSS. Tailwind CSS and Laravel is a better choice against custom CSS. 

What is Vite?

Vite is a bundler for your code that provides faster and smooth development of your projects to make them relatable with modern needs. 

Features of Vite 3

  • Quick Server 
  • Lightning Fast HMR (Hot Module Replacement)
  • Exclusive support for TypeScript, JSX, CSS, and others
  • Optimized Build
  • Universal Plugins
  • Fully Typed APIs

Laravel released laravel 9.2.0 with four major changes. In the earlier upgrade they replaced webpack.mix.js root file in Laravel with vite.config.js file which is amazingly efficient and progressive. 

Now we will give you a walkthrough to  install Tailwind CSS 3 in Laravel 9 using Vite 3 and it takes just a few steps as most of which you already know through our previous posts. 

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

#1 Create A Laravel Project

Install a new Laravel app project. Type this command to do that: 

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

If you already a global composer dependency for Laravel installed use this:

laravel new laravel9-tailwind3-vite3

#2 Setup Tailwind CSS 3

Now install Tailwind with its required dependencies like PostCSS and also auto-prefixer

npm install -D tailwindcss postcss autoprefixer

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p

It creates two files for our root directory:tailwind.config.js and postcss.config.js. We will use our custom and thematic app settings to Tailwind config file. We can tell it to search paths for our pages and components with this code piece: 

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

Now we need to add the template path to tailwind.config.js. See the code example here 

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

#3 Add Tailwind CSS to app.css

resources/css/app.css

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

Now we are going to 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,
        }),
    ],
});

Let’s import our CSS via JavaScript now in our app’s resources/js/app.js file:

resources/js/app.js

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

#4 Importing 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>Install Tailwind CSS 3 in Laravel 9 using Vite 3 - LaraMatic</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 Using Vite 3 - LaraMatic</h1>
        </div>
    </body>

</html>

#5 Let’s Start Vite Development Server Now

We need to run Vite Dev Server type this to do that:

npm run serve

#6 Start Laravel Development Server
Now will use this command to start our Laravel Dev server.

php artisan serve

This is how you can install install Tailwind CSS 3 using Laravel 9 and Vite 3. All three are the modern needs for high-end web development that will not just speed up your workflow but also provide cutting edge modernity to your projects. Let us know in the comments if you have any queries about Tailwind CSS, Laravel or even Vite and its features. We will happily address them.

Learn Laravel, React, VueJS and Python
read programming books
Tags: