Tailwind and Assets

Tailwind and Assets

Tailwind CSS, Fonts, and Static Assets in a Laravel Project

Tailwind CSS 4 5,202 comes with the skeleton, configured in CSS rather than tailwind.config.js: resources/css/app.css holds @import 'tailwindcss', two @source lines for templates outside the automatic scan, and a @theme block setting --font-sans. For images, plugin 3 added (because of Vite 8 25,978 ) an assets option that replaces the old import.meta.glob trick: assets: ['resources/images/**'] in laravel(), then Vite::asset() in Blade.

Output of 61

$ head -c 65 public/build/assets/app-*.css; echo
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
$ php artisan tinker --execute "echo Vite::asset('resources/images/logo.svg');"
http://localhost:8000/build/assets/logo-DC1hrF9D.svg

The welcome page's inline fallback CSS still says v4.0.7; ignore it. Outside a request, URLs fall back to APP_URL (or ASSET_URL for a CDN), so set it in production. Files in public/ are served unhashed; keep only favicon.ico and robots.txt there.

The fonts option fetches fonts at build time from google, bunny, fontsource or local providers and emits them as hashed assets, so visitors never contact a font CDN; @fonts prints the preload links and @font-face rules. Each build warned that metric-matched fallback fonts need the optional fontaine 1,992 package (npm 2,036 install -D fontaine).

MENU