How to install Tailwind and Vite in Laravel 10 using NPM.

Laravel Vite and Tailwind CSS

To install Tailwind in a Laravel 10 project using NPM and Vite, you will need to follow these steps:

Open a terminal window, navigate to your Laravel project directory, and install Tailwind CSS by running the following command.

npm install tailwindcss

Next, create a configuration file for Tailwind by running the following command.

npx tailwindcss init

This will create a tailwind.config.js file in your project's root directory. You can customize the configuration of your styles in this file.

Next, you will need to create a CSS file where you will include your Tailwind styles. You can create a new file called app.css in the public/css directory of your project.

In the app.css file, you can import the Tailwind CSS styles by adding the following line at the top of the file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

To use Vite to compile your CSS file, you will need to install the postcss and postcss-import packages by running the following command:

npm install postcss vite laravel-vite-plugin

Next, you will need to create a vite.config.js file in your project's root directory and add the following code to it:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Finally, you will need to compile your CSS file using Vite. You can do this by running the following command in your terminal:

npm run dev

This will compile your CSS file and prepare it for use in your Laravel project. You can then include the compiled CSS file in your HTML templates by adding the following line to the head of your template file:

<link rel="stylesheet" href="/css/app.css">

Good job! Now you can use Tailwind CSS in your Laravel project with the help of Vite.