Styles and scripts

A site needs styles and scripts. Laravel uses the Vite bundler for them: it combines files, minifies them and refreshes the page instantly on changes. The sources live in the resources folder, and the built files in public/build.

Installation

Building needs Node.js. The dependencies are listed in package.json, which the project already has:

npm install

Source files

vite.config.js lists the entry files:

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

Adding to a template

The @vite directive inserts the needed link and script tags:

<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    {{ $slot }}
</body>
</html>

Development mode

npm run dev

Vite starts its own server and watches the files. Save a style or a template, and the page in the browser refreshes by itself. The command is left running in a separate terminal window while you develop.

Building for the server

npm run build

The command creates minified files in public/build. Their names contain a hash of the content, so after an update visitors' browsers load the new version right away instead of taking the old one from the cache. The @vite directive fills in the right names by itself.

Tailwind CSS

New Laravel projects come with Tailwind already set up — a set of ready-made classes for styling right in the markup:

<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700">
    Save
</button>

One line in resources/css/app.css brings it in:

@import 'tailwindcss';

Images and fonts

Vite processes files referenced by styles and scripts by itself. An image from a template is added like this:

<img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Logo">

Files that need no processing — favicon.ico, robots.txt — go into the public folder and are linked with the asset() function.

Interactivity

For pages that need more than a simple script there are three paths: Alpine.js — small bits of behavior in the markup, Livewire — interactive components in PHP without your own JavaScript, Inertia — a full React or Vue interface on Laravel routes and controllers.

Common mistake

If npm run build is not run on the production server, the page opens without styles and with the error Vite manifest not found. The build is run on every deployment — on the server or beforehand, before uploading the files. And do not run npm run dev on the server: that mode is for development only.