How to Install Tailwind CSS 3 in Laravel 9 With Vite 3
Tags: laravel, vite, tailwindcss, tutorial
Published: 2022-09-20 04:25:28

[Tailwind](https://tailwindcss.com/?ref=techvblogs.com) 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](https://laravel.com/?ref=techvblogs.com) 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).

```bash
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:

```javascript
// 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`

```javascript
/** @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`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

```javascript
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`

```javascript
import './bootstrap';
import '../css/app.css'
```
#### Step 4: Import Vite Assets to Laravel Blade

`resources/views/welcome.blade.php`

```html
<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>
```

#### Step 5: Run Vite Development Server

Run the following command to start the Vite Development server:

```bash
npm run dev
```

#### Step 6: Run Laravel Development Server

```bash
php artisan serve
```

**Thank you** for reading this blog.