Laravel Install Tailwind CSS 3 with Laravel Vite

Dec 10, 2022
Article · 3 min
746 words

Like (0)
Favorite (0)

Hello Artisans, today I'll show you how to display social media share icons in your Laravel application. It'll take only 5 steps to complete today's tutorial. So, let's get started and see how we can easily integrate sharable social media icons in our Laravel application.

Note: Tested on Laravel 9.19

Install and Configure tailwind package for npm
Configure Vite
Setup Blade
Output

Install and Configure tailwind package for npm

First of all, we'll install npm and tailwind package for npm. Let's fire the the below command in the terminal.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Now we need to configure the tailwind.config.js where we will add our template path. Let's replace the below code with the default one.

tailwind.config.js

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

And finally, we need to add tailwind directive in our app.css

resources/css/app.css

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

and we're done with our tailwind setup. Now we'll proceed to configure our vite setup.

Configure Vite

Now we've to configure our vite.config.js. Laravel 9 gives us configured vite config file, what we do is just removed the app.css file from input array. Look at the below source code.

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,
        }),
    ],
});

Now we need to import our app.css file in our app.js file for completing our vite setup.

resources/js/app.js

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

Setup Blade

Now we're ready with our vite setup. Now we need to include our vite directive in our blade file to show the result. For that purpose, we'll use the Laravel default welcome.blade.php. So open the file and replace it with the below codes.

filename.ext

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

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

    <title>Laravel 9 Vite 3 With Tailwind CSS</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">Laravel 9 Vite with Tailwind CSS</h1>
</div>
</body>

</html>

Output

And finally, we're ready with our setup. It's time to check our output. Now go to http://127.0.0.1:8000, If everything goes well you'll find a below output

That's it for today. I hope you've enjoyed this tutorial. You can also download this tutorial from GitHub. Thanks for reading. 🙂

Laravel