Tailwind CSS v4 Migration Guide for Laravel Projects
Mehran Shafique · Jun 13, 2026 · 1 min read · 2 views
Tailwind v4 moves configuration into CSS with @theme and integrates natively with Vite via @tailwindcss/vite. RelaxGen's own site runs Tailwind v4 on Laravel 12 — here are migration lessons.
Replace tailwind.config.js gradually
Define design tokens in resources/css/app.css using @theme. Map brand colours, fonts and breakpoints explicitly. Remove redundant JS config once parity is verified.
@apply limitations
Custom component classes defined with @apply cannot reference other custom component classes in v4. Use raw utilities or duplicate gradient definitions inline.
Scan paths
Add @source for Blade, JS and vendor pagination views so production builds include all utilities.
Related articles
Building Fast, Accessible UIs with React and Tailwind
Performance budgets, keyboard navigation and component patterns for production React apps paired with Tailwind CSS v4.
React Server Components vs Client Components: A Decision Guide
When to fetch on the server, when to hydrate in the browser, and how this affects SEO and Time to Interactive.
Frontend Performance Budgets for B2B SaaS Dashboards
Set JS bundle limits, lazy-load admin modules and measure Core Web Vitals on authenticated pages.