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

Laravel Vite and Tailwind CSS

To install Tailwind in a Laravel 9 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.

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

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:

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

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

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

This will compile your CSS file and make it ready 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:

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

--

--

Full Stack Engineer at NASA. Volunteer at Smithsonian’s The Renwick Gallery, and former drummer of #GovernmentIssue. https://www.karlhill.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karl Hill

Full Stack Engineer at NASA. Volunteer at Smithsonian’s The Renwick Gallery, and former drummer of #GovernmentIssue. https://www.karlhill.com