Killing IF IS TAILWIND IN BLADE
Stop using @if statements to switch CSS classes in your Blade templates.
If you use @if($isTailwind) or @elseif($isBootstrap) inside your components, your code will not scale. Adding a third theme means adding a third branch to every single file. This is a design flaw.
I solved this in a Livewire tables fork by creating a theme class seam.
The Problem A package with 40 Blade partials should not require editing 40 files just to add one new theme. When adding a variant requires changing every template, your logic is in the wrong place.
The Solution: A Keyed Class Map I moved all class strings into one static map called ThemeStyles. Instead of branching logic, Blade files now ask for a specific key.
How it works: • Create a static array that holds class strings. • Use dotted names like table.wrapper to identify styles. • Use a single method to fetch the class based on the active theme. • Set the system to fall back to a default theme if a key is missing.
This way, a new theme only defines what it changes. It does not re-implement the entire template.
Two Critical Rules for Success
Avoid Closures Do not use functions or closures inside your class map. Closures prevent you from using php artisan config:cache. Use plain strings to keep your application fast and cache-safe.
Use Characterization Tests Migrating 40 templates manually is risky. You might miss a single class or shift a border by 1px.
I used characterization tests to prevent this. These tests do not check if the HTML is "good." They check if the HTML is exactly the same as before. If the byte-for-byte output matches the original, the migration is safe.
The Results
- Adding a theme: Edit one map instead of 40 files.
- Class source: One central file instead of scattered code.
- Cache safety: High, because we use strings.
- Blade logic: Simple key requests instead of complex branches.
If adding a new style forces you to edit every file, extract that variation into a seam.
Source: https://dev.to/nasrulhazim/killing-ifistailwind-in-blade-a-theme-class-seam-for-livewire-tables-478d