Resources

Active contributors: Taylor Otwell, Nuno Maduro

Purpose

resources/ holds the source files that Vite compiles into public/build/, plus the Blade templates the framework renders. The skeleton ships exactly one Blade view, an 11-line CSS entry, and a one-line JS entry. The intent is to give you the minimum scaffolding for HMR + Tailwind v4 without locking you into a specific frontend approach.

Directory layout

resources/
├── css/
│   └── app.css                  # Tailwind v4 entry, 11 lines
├── js/
│   └── app.js                   # //  (single comment)
└── views/
    └── welcome.blade.php        # 223-line landing page

There is no resources/lang/, no resources/markdown/, no JS framework setup (React, Vue, Inertia). Add what you need.

resources/css/app.css

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
  --font-sans:
    'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

Three things to notice:

• Tailwind v4 import. @import 'tailwindcss'; replaces the directive triplet (@tailwind base/components/utilities) used in v3.
• @source directives. Tailwind v4's source-discovery system needs explicit paths to find class names. Listed are: framework pagination views, Laravel's compiled Blade view cache (so dynamically-rendered classes survive purging), and every .blade.php/.js file under resources/.
• @theme block. Sets --font-sans to Instrument Sans (with sensible fallbacks). The font itself is loaded by the Vite config via bunny('Instrument Sans', { weights: [400, 500, 600] }).

resources/js/app.js

//

That's the entire file. The skeleton needs something for Vite's input array (vite.config.js declares both app.css and app.js), but doesn't ship application JavaScript. A 2026-04-01 PR (#6778, commit 371cc0b8) explicitly removed the previous axios setup to keep things minimal.

resources/views/welcome.blade.php

The landing page rendered by GET / (see routes/web.php's single route closure). It's a 223-line file that:

1. Sets the document lang from app()->getLocale().

2. Uses {{ config('app.name', 'Laravel') }} as the page title.

3. Calls the @fonts Blade directive (registered by laravel-vite-plugin/fonts's Bunny integration) to emit the <link> tags for Instrument Sans.

4. Inlines a giant compiled Tailwind stylesheet as a fallback if the build manifest isn't available:

   @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
       @vite(['resources/css/app.css', 'resources/js/app.js'])
   @else
       <style>/* tailwindcss v4.0.7 ... */</style>
   @endif

   This makes a fresh composer create-project look reasonable even before npm run build has been run.

5. Renders a "Let's get started" content panel with conditional auth links:

   @if (Route::has('login'))
       @auth
           <a href="{{ url('/dashboard') }}">Dashboard</a>
       @else
           <a href="{{ route('login') }}">Log in</a>
           @if (Route::has('register'))
               <a href="{{ route('register') }}">Register</a>
           @endif
       @endauth
   @endif

   Because the skeleton ships no login or register routes, all of this is hidden by the not-has-[nav]:hidden Tailwind rule on the <header> until you add a starter kit.

The rest of the file is a marketing-style CTA grid pointing to the Laravel docs, deployment guide, and Laravel Cloud, all with Tailwind utility classes for light/dark mode, hover states, and responsive layouts.

Blade compilation

Blade templates are pre-compiled on first render. resources/views/welcome.blade.php becomes a hashed PHP file in storage/framework/views/ and is served from there until the source file's mtime changes. php artisan view:cache pre-compiles every view; php artisan view:clear blows away the cache.

The vite.config.js has a watcher exclusion to avoid an infinite-loop scenario:

server: {
    watch: {
        ignored: ['**/storage/framework/views/**'],
    },
},

Without this, Vite would notice every Blade compile and trigger a rebuild.

Vite pipeline

graph LR
    AppCSS[resources/css/app.css] --> Vite
    AppJS[resources/js/app.js] --> Vite
    Tailwind[@tailwindcss/vite] --> Vite
    LaravelPlugin[laravel-vite-plugin] --> Vite
    BunnyFont[laravel-vite-plugin/fonts/bunny] --> Vite
    Vite -- npm run dev --> HMR[Vite dev server + public/hot]
    Vite -- npm run build --> Manifest[public/build/manifest.json]
    Manifest --> Blade[Blade @vite directive]
    HMR --> Blade
    Blade --> Browser

When public/hot exists, Blade's @vite directive emits dev-server URLs (with HMR script tags). When only public/build/manifest.json exists, it emits the hashed production asset URLs. When neither exists, the welcome view's inline-stylesheet fallback kicks in.

Adding views

# create resources/views/profile/show.blade.php
mkdir -p resources/views/profile
touch resources/views/profile/show.blade.php

Reference the view by its dotted path: view('profile.show', ['user' => $user]). Components (introduced in Laravel 7+) live in resources/views/components/ and are referenced as <x-component-name /> in templates.

Integration points

• routes/web.php renders welcome via view('welcome').
• vite.config.js declares resources/css/app.css and resources/js/app.js as inputs.
• config/app.php drives {{ config('app.name', 'Laravel') }} in the welcome view's title.
• storage/framework/views/ is where compiled Blade lives.
• public/build/ receives the Vite production output; public/hot is the marker file Vite drops when in dev mode.

Entry points for modification

• Replace the welcome view. Edit resources/views/welcome.blade.php directly. There's no layout split — everything is inline.
• Add Tailwind utilities. They get picked up automatically as long as the file matches the @source globs in app.css.
• Switch from Tailwind to anything else. Remove the @tailwindcss/vite plugin from vite.config.js, drop the @import 'tailwindcss' line from app.css, and import your replacement.
• Add a real entry-point JS app. Replace the // in app.js with your bundle entry. Vite picks up imports automatically.

Key source files

File	Purpose
resources/css/app.css	Tailwind v4 entry + theme + source-discovery globs
resources/js/app.js	JS entry (currently just a //)
resources/views/welcome.blade.php	Default landing page rendered by GET /

See Public for the document root that ultimately serves the compiled output, and Routes for the route that picks the welcome view.