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

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

In this post we will give you information about How to Install Tailwind CSS 3 in Laravel 10 With Vite 3. Hear we will give you detail about How to Install Tailwind CSS 3 in Laravel 10 With Vite 3 And how to use it also give you demo for it if it is necessary.

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 10.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 10 with VIte 3.

How to Install Tailwind CSS 3 in Laravel 10 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 laravel10-tailwind3-vite3

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

laravel new laravel10-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.


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

Step 3: Add Tailwind CSS to 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: [
            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:


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

Step 4: Import Vite Assets to Laravel Blade


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

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

        <title>How to Install Tailwind CSS 3 in Laravel 10 With Vite 3 - onlinecode</title>


    <body >
        <div >
            <h1 >How to Install Tailwind CSS 3 in Laravel 10 With Vite 3 - onlinecode</h1>


Step 5: Run Vite Development Server

Run the following command to start the Vite Development server:

npm run dev

Step 6: Run Laravel Development Server

php artisan serve

Thank you for reading this blog.

Also see: How to Install Bootstrap 5 in Laravel 10 With Vite

  .       .

Hope this code and post will helped you for implement How to Install Tailwind CSS 3 in Laravel 10 With Vite 3. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US