maryUI

Upgrading to v2

Why

If you want to use Laravel 12+ you should upgrade.

  • Tailwind 4 brings a lot of new features and improvements.
  • Laravel 12 default skeleton uses the new CSS setup from Tailwind 4.
  • daisyUI 5 uses a lot of Tailwind 4 features.
  • maryUI 2 is here to stick to the new defaults.

Important

There are some notable changes in Tailwind and daisyUI you should be aware. Please, refer to its own release notes and changelog for more information.

Upgrade it

If you are starting a new project you must follow the installation guide instead.


Using app.css (recommended)

Upgrade to Laravel 12 (optional).

# It is a good time to upgrade all the things.

Install maryUI v2.

composer require robsontenorio/mary:^2.0
 
# Clear the view cache
php artisan view:clear

Adjust your JS dependencies.

# Remove `tailwind.config.js` and `postcss.config.js` from your project.
rm tailwind.config.js postcss.config.js
 
# Remove unnecessary dependencies from your `package.json`
yarn remove autoprefixer postcss
 
# Update and add new dependencies
yarn add --dev daisyui tailwindcss @tailwindcss/vite laravel-vite-plugin vite

Add the following lines to your vite.config.js file.

 import {defineConfig} from 'vite';
 import laravel from 'laravel-vite-plugin';
+import tailwindcss from '@tailwindcss/vite' 
  
 ...
  
 plugins: [
+    tailwindcss(), 
 ...
 ]

Edit the top of your app.css file to look like this. Remember this is the Tailwind 4 preferred setup, not daisyUI or maryUI.

 /* Remove these and any other `@tailwind` directives if you have it */
-@tailwind base;             
-@tailwind components;       
-@tailwind utilities;        
-...        
  
 /* Tailwind */
+@import "tailwindcss";      
  
 /* daisyUI */
+@plugin "daisyui" {         
+    themes: light --default, dark --prefersdark;   
+}   
  
 /* maryUI */
+@source "../../vendor/robsontenorio/mary/src/View/Components/**/*.php"; 
  
 /* Dark theme variant support */
+@custom-variant dark (&:where(.dark, .dark *)); 
  
 /* Laravel 12 defaults */
+@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php"; 
+@source "../../storage/framework/views/*.php"; 
+@source "../**/*.blade.php"; 
+@source "../**/*.js"; 
+@source "../**/*.vue"; 
  
 /* Your styles goes here ... */
 /* ... */

Changelog

Appearance

The most noticeable change in maryUI 2 is the appearance, because we follow daisyUI`s design system. And it has changed to a more modern look and feel.

Remember that you can always change the theme, tweak theme variables or even override it with Tailwind, once maryUI does not ship with any custom CSS classes. See Customizing docs.

Pro tip: stick to the defaults, avoid to tweak things. DaisyUI themes are carefully hand crafted with all UX/UI things in mind.

Small CSS changes

Some components classes were internally rearranged to better control of spacing and positioning. Consider to revisit the docs examples and compare with your current implementation.

Tailwind 4

This is not about maryUI. But, if you notice some weird style on your app, consider to visit the Tailwind 4 upgrading guide.

Here is an example: 

# There is no default border color anymore
<hr/>
 
# You have to add it by yourself
<hr class="border-t border-t-base-content/10" />
 
# Or add it on your `app.css`
hr {
    @apply border-t border-t-base-content/10
}

daisyUI 5

There also some small changes about daisyUI. If you notice some weird style on your app you should take look at its own changelog.

For example, the bg-base-100, bg-base-200 and bg-base-300 classes has a smoothed color now. That means, you can simplify like this 

-<body class="min-h-screen font-sans antialiased bg-base-200/50 dark:bg-base-200"> 
+<body class="min-h-screen font-sans antialiased bg-base-200">

Theme Toggle

This is the Tailwind 4 way to use themes and toggle the dark mode. See Theme Toggle for more info. 

/* daisyUI */
@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
}
 
/* Remeber to add the dark variant theme support */
@custom-variant dark (&:where(.dark, .dark *));

All input components

The primary style was removed from all input components. If you want to make it looks like as before, you can add the respective primary class, depending on the component.

Consider to use the new defaults instead of primary classes. UX people approve it :) 
<div class="grid gap-5 bg-base-200/80 rounded p-8"> 
{{-- Default --}}
<x-input label="Input" />
<x-select label="Select" />
<x-datetime label="Date" />
<x-checkbox label="Checkbox" />
<x-hr /> 
And so on  ...
</div>  
<div class="grid gap-5 bg-base-200/80 rounded p-8"> 
 
{{-- If you like the primary style --}}
<x-input label="Input" class="input-primary" />
<x-select label="Select" class="select-primary" />
<x-datetime label="Date" class="input-primary" />
<x-checkbox label="Checkbox" class="checkbox-primary" />
<x-hr /> 
And so on  ...
</div>

If you previously have override the inputs hint and error classes, these are the new defaults from daisyUI.

public ?string $hintClass = 'fieldset-label',
public ?string $errorClass = 'text-error',

Radio vs Group

The x-radio component was renamed to x-group, and now there is a new component called x-radio. See Radio and Group docs.

Radio
Group 
@php                                            
    $users = App\Models\User::take(3)->get();   
@endphp                                         
<x-radio label="Radio" :options="$users" wire:model="user" />
 
<x-group label="Group" :options="$users" wire:model="user" />
Made with by Robson Tenório and contributors.