DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to Install Tailwind CSS 3 in Laravel 9 With Vite 3
Suresh Ramani
Suresh Ramani

Posted on • Updated on • Originally published at techvblogs.com

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.

Top comments (1)

Collapse
 
phpsecure profile image
Julia Kotova

​​Hi Suresh Ramani,

One of the biggest challenges you may face as a Developer is the security of your PHP code.

I’m currently conducting CustDev for a PHP code scanner that uses machine learning to detect security issues. Your experience with code security would help me understand how I can create the best product for specialists like you.

Do you have 20 minutes to discuss your experiences protecting code?

Your time is valuable, and I would be glad to provide a year of free access to PHP Secure, as well as give you an Amazon $30 gift card.

Please contact me:
email: phpsecure.org@gmail.com
skype: guidera15

Thank you,
Julia
CEO PhpSecure

🌚 Life is too short to browse without dark mode