Follow this guide to upgrade from Flux v1.x to v2.x.
Prerequisites
Before upgrading to Flux v2, make sure you have the following:
-
Laravel version 10 or later
-
Livewire version 3.5.19 or later
-
Tailwind CSS version 4 or later
Flux v2 is built on top of Tailwind CSS v4, so if you are using an older version of Tailwind CSS, you need to upgrade it to v4 or later by following the
Tailwind CSS upgrade guide.
Update Flux
Run the following composer command to upgrade your application's Flux and Flux Pro dependencies to v2:
Rename @fluxStyles
In Flux v2, the @fluxStyles directive has been removed as these styles are now imported directly into your app.css file.
However, the @fluxAppearance directive has been added as a replacement to manage dark mode in your application—it controls the .dark class on the <html> element.
Clear the view cache
Run the following Artisan command from your application's root directory to clear any cached/compiled Blade views:
Tailwind Config
Because Flux's styles are no longer added via the @fluxStyles directive, you will need to import the Flux CSS file directly into your ./resources/css/app.css file like so:
Migrating accent colors
If you had previously defined custom accent colors in your app.css and tailwind.config.js file, then you will need to update them in your app.css file.
Before, these were defined in a single @layer base block within your app.css file, but now they are defined as two separate blocks:
-
default colors are now inside the @theme block
-
dark mode colors are now inside the @layer theme block
Here's an example of defining sky as your application's accent color:
If you're still using your old Tailwind config, you can now remove the following lines:
Re-assigning gray
If you had previously re-assigned Flux's gray of choice in your tailwind.config.js file, then you will need to move this to your app.css file.
Here's an example of re-assigning zinc to neutral:
If you are continuing to use your tailwind.config.js file in your application, then you can remove the following:
Dark mode changes
If you had previously set darkMode: null in your tailwind.config.js file to prevent Flux from controlling the .dark class and handling dark mode automatically, you can now accomplish this by not including the @fluxAppearance directive in your layout file:
Rename components
In Flux v2, some components have been renamed. You will need to update your code accordingly:
| v1 |
v2 |
| flux:options |
flux:select.options |
| flux:option |
flux:select.option |
| flux:cell |
flux:table.cell |
| flux:columns |
flux:table.columns |
| flux:column |
flux:table.column |
| flux:rows |
flux:table.rows |
| flux:row |
flux:table.row |