Tailwind CSS v4 Migration Guide for Laravel Projects
Upgrade from Tailwind v3 to v4 with Vite, fix @apply pitfalls and adopt CSS-first configuration.
Mehran Shafique · June 15, 2026 · 1 min read · 99 words
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.
Explore more on RelaxGen: Our services · Tools & software · AI prompt library · Portfolio · Contact us.
Need help with your project?
RelaxGen builds enterprise Laravel platforms, REST APIs and AI automation for global clients.
Hire Us
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.