there is no webpack.mix.js file in my laravel project root
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
# Installing Tailwind CSS in Laravel: Do You Need Webpack and Laravel Mix?
Itâs a common point of confusion when starting or working with existing Laravel projects, especially regarding front-end asset compilation. If you are looking at a Laravel 9 project and don't see a `webpack.mix.js` file in the root directory, it immediately makes you wonder if you need to manually set up the entire Webpack ecosystem just to add some CSS utility classes.
As a senior developer, I can tell you that the answer is nuanced: **No, you do not necessarily have to manually install Webpack and Laravel Mix if you are using modern Laravel tooling.** However, understanding *why* those files exist and what alternatives are available is crucial for long-term project health.
This post will guide you through the best way to install Tailwind CSS in your Laravel application, addressing whether you need that legacy build setup or if a simpler approach exists.
## Understanding the Build Tool Landscape (Mix vs. Vite)
Historically, Laravel projects heavily relied on **Laravel Mix**, which was a wrapper around **Webpack** for bundling JavaScript and CSS assets. If you see `webpack.mix.js`, it confirms that the project was set up to use this older pipeline.
However, modern Laravel development strongly favors **Vite**. Vite is a faster, leaner build tool that leverages native ES Modules, offering significantly quicker hot module replacement (HMR) and faster compilation times compared to Webpack setups.
If your project is newer or has been recently scaffolded, you might not have a `webpack.mix.js` file because the project defaults to using Vite for asset management. This means you don't need to manually install the entire Webpack stack just to handle Tailwind CSS.
## The Modern Approach: Installing Tailwind with Vite
Since your goal is simply to integrate Tailwind into your Laravel application, we can achieve this without necessarily forcing a full Webpack installation if Vite is available.
### Step 1: Ensure You Have a Build Setup (Vite)
First, ensure your basic asset compilation pipeline is set up correctly. If you are starting fresh, running `composer create-project laravel/laravel example-app` will give you a standard Laravel structure that often includes the necessary configuration for Vite.
### Step 2: Install Tailwind Dependencies
The installation of Tailwind CSS itself involves installing Tailwind, PostCSS, and Autoprefixer as development dependencies. This is done via npm or yarn, which are handled by your project's package manager (npm/yarn), not necessarily Webpack directly.
Run the following command in your project root to install the necessary packages:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
This command installs the core tools and generates the necessary configuration files: `tailwind.config.js` and `postcss.config.js`. This is the foundation for using Tailwind CSS, regardless of whether you are bundling assets via Mix or Vite.
### Step 3: Configure Tailwind
Next, you need to tell Tailwind where your Blade files are so it can scan them for utility classes. Open the generated `tailwind.config.js` file and configure the `content` array:
```javascript
// tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue", // Include this if you use Vue components
],
theme: {
extend: {},
},
plugins: [],
}
```
Finally, import the Tailwind directives into your main CSS file (usually found in `resources/css/app.css`):
```css
/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Conclusion: Simplicity Over Complexity
To directly answer your question: **No, you do not have to manually install Webpack and Laravel Mix if you are using Vite.**
For modern Laravel projects, the recommended path is to utilize Viteâs built-in asset pipeline. You only need to install the necessary CSS tooling (`tailwindcss`, `postcss`, `autoprefixer`) via npm/yarn, configure them correctly within your project structure, and let Vite handle the compilation. This approach results in a faster, more maintainable setup, aligning perfectly with Laravel's focus on clean architecture and modern tooling, as promoted by resources on the [laravelcompany.com](https://laravelcompany.com). Focus on leveraging the tools provided by the framework rather than manually managing monolithic build systems.