Instalación completa: Laravel 12 + Livewire 3 + maryUI + Tailwind 4

Guía paso a paso para dejar listo tu entorno local y crear tu primer componente con UI.

1) Requisitos y versión mínima

PHP 8.2+, extensiones: Ctype, cURL, DOM, Fileinfo, Filter, Hash, Mbstring, OpenSSL, PCRE, PDO, Session, Tokenizer, XML.
Composer 2+, Node.js (o Bun).
Laravel 12 introduce starter kits oficiales también para Livewire (además de React/Vue). Útil si luego quieres scaffolding de auth.

Si te faltan PHP/Composer, la doc oficial ofrece instaladores rápidos por SO y el Laravel Installer.

2) Crear el proyecto Laravel 12

Opción A — Laravel Installer

composer global require laravel/installer
laravel new blog-livewire-mary
cd blog-livewire-mary

El instalador puede preguntarte por DB, pruebas y starter kit; puedes iniciar sin kit para usar maryUI sin colisiones, y más tarde integrar auth.

Opción B — Composer (si no usas el Installer)

composer create-project laravel/laravel blog-livewire-mary "^12.0"
cd blog-livewire-mary

3) Configuración inicial de entorno

Copia el
```
.env
```
y genera APP_KEY:

cp .env.example .env
php artisan key:generate

Base de datos
Laravel 12 arranca por defecto con SQLite ya preparado. Si prefieres MySQL/PostgreSQL, ajusta en
```
.env
```
:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog_livewire_mary
DB_USERNAME=usuario
DB_PASSWORD=secret

Luego:

php artisan migrate

(La doc explica SQLite por defecto y cómo cambiar a MySQL/Postgres).

Zona horaria e idioma
En
```
config/app.php
```
:

'timezone' => 'America/Mexico_City',
'locale'   => 'es',
'faker_locale' => 'es_MX',

Enlaces de storage

php artisan storage:link

4) Instalar Tailwind CSS 4 con Vite en Laravel 12

Tailwind 4 simplificó la instalación usando el plugin de Vite:

Instala dependencias:

npm i -D tailwindcss @tailwindcss/vite

Agrega el plugin en
```
vite.config.ts
```
:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    tailwindcss(),
  ],
})

Importa Tailwind y define fuentes de análisis en
```
resources/css/app.css
```
:

@import 'tailwindcss';

/* Rutas que Tailwind debe escanear (v4 usa @source en CSS) */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

Incluye el CSS en tu layout (Blade):

@vite('resources/css/app.css')

Levanta el build en desarrollo:

npm run dev

(Guía oficial Tailwind para Laravel v4).

5) Instalar Livewire 3

composer require livewire/livewire

Livewire inyecta sus assets automáticamente cuando detecta componentes. Si quieres control manual, en tu layout añade:

@livewireStyles
...
@livewireScripts

(Instalación y notas oficiales).

Tip: En Nginx muy personalizado podrías ver 404 en
/livewire/livewire.js
. La guía documenta cómo resolverlo (endpoints o bundling manual).

6) Instalar maryUI (UI para Livewire basada en DaisyUI + Tailwind)

composer require robsontenorio/mary
php artisan mary:install
# luego arranca el dev server de Vite si no está corriendo
npm run dev    # o yarn dev

maryUI no trae CSS propio: se apoya en DaisyUI + Tailwind (lo que hace el instalador es “enchufar” todo y publicar config si corresponde).
Si usas Breeze/Jetstream/FluxUI, el instalador puede publicar
```
config/mary.php
```
con un prefijo global para evitar choque de nombres; ej.
```
x-mary-button
```
,
```
x-mary-card
```
.
Si notas glitches, prueba remover
```
@tailwindcss/forms
```
.
(Todo esto está en su página de instalación).

Cambiar prefijo global (opcional):

php artisan vendor:publish --tag mary.config
php artisan view:clear

config/mary.php

'prefix' => 'mary-', // así usarás <x-mary-button />, etc.

7) Crea el layout base (Blade)

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="es" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? config('app.name') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="min-h-dvh bg-base-200 text-base-content">
    <div class="container mx-auto px-4 py-6">
        {{ $slot }}
    </div>

    @livewireScripts
</body>
</html>

maryUI utiliza clases de DaisyUI y Tailwind. El atributo
data-theme
te permite alternar temas (puedes añadir un toggler luego).

8) Tu primer componente Livewire + maryUI

Genera el componente:

php artisan make:livewire Contador

Lógica
```
app/Livewire/Contador.php
```
:

<?php

namespace App\Livewire;

use Livewire\Component;

class Contador extends Component
{
    public int $valor = 0;

    public function inc() { $this->valor++; }
    public function dec() { $this->valor--; }

    public function render()
    {
        return view('livewire.contador');
    }
}

Vista

resources/views/livewire/contador.blade.php

(Usando maryUI: botón, card y badge)

<x-card class="max-w-md mx-auto">
    <x-slot:heading>
        <x-badge>Demo Livewire + maryUI</x-badge>
    </x-slot:heading>

    <div class="flex items-center justify-center gap-4 py-4">
        <x-button icon="minus" wire:click="dec" />
        <span class="text-3xl font-bold">{{ $valor }}</span>
        <x-button icon="plus" wire:click="inc" />
    </div>

    <x-slot:footer>
        <x-alert icon="info">
            Este es tu primer componente con acciones reactivas.
        </x-alert>
    </x-slot:footer>
</x-card>

Si publicaste el prefijo en
config/mary.php
como
mary-
, cambia las etiquetas a
<x-mary-card>
,
<x-mary-button>
, etc.

Ruta y página para verlo
```
routes/web.php
```
:

use Illuminate\Support\Facades\Route;
use App\Livewire\Contador;

Route::get('/', Contador::class);

Abre

http://localhost:8000

9) Servidores locales y script de desarrollo “todo en uno”

En Laravel 12 puedes usar un script que enciende servidor HTTP, Vite y el queue worker en conjunto (según doc de instalación).
Desde el folder del proyecto:

npm install && npm run build
composer run dev

(Ver secciones de Creating an Application / Initial Configuration).

Alternativas de entorno: Herd (macOS/Windows) integra PHP, Nginx y DBs con UI; útil si no quieres configurar cada servicio manualmente.

10) Ajustes útiles para desarrollo

Mail local: usa
```
MAIL_MAILER=log
```
(simple) o Mailpit/SMTP local.

Colas: pon

QUEUE_CONNECTION=database

y ejecuta

php artisan queue:table && php artisan migrate

Logs y debug:
```
APP_DEBUG=true
```
solo en local.
Cache rutas/config/vistas (producción):

php artisan optimize
# o granular:
php artisan config:cache
php artisan route:cache
php artisan view:cache

(Optimizaciones de despliegue).

11) Despliegue (muy breve)

Sirve public/ como raíz del sitio.
Nginx típico (fastcgi a PHP 8.2) y permisos de
```
storage
```
y
```
bootstrap/cache
```
.

12) Problemas frecuentes (y cómo resolverlos)

No se aplican estilos → confirma
```
@vite('resources/css/app.css')
```
, que
```
npm run dev
```
esté activo y que Tailwind v4 esté configurado con
```
@tailwindcss/vite
```
y las directivas
```
@source
```
en
```
app.css
```
.
Choque de componentes con otro kit (Breeze/Jetstream/FluxUI) → usa el prefijo de maryUI (ej.
```
mary-
```
) o retira plugins conflictivos como
```
@tailwindcss/forms
```
.
404 en
```
/livewire/livewire.js
```
con Nginx custom → ver sección de instalación de Livewire y ajustar endpoint o bundling ESM.

13) Siguiente paso sugerido

Si necesitas auth lista: usa el Starter Kit de Livewire para Laravel 12 y luego reemplaza/convive UI con maryUI (si hay colisiones, activa el prefijo).

Instalación completa: Laravel 12 + Livewire 3 + maryUI + Tailwind 4

1) Requisitos y versión mínima

2) Crear el proyecto Laravel 12

Opción A — Laravel Installer

Opción B — Composer (si no usas el Installer)

3) Configuración inicial de entorno

4) Instalar Tailwind CSS 4 con Vite en Laravel 12

5) Instalar Livewire 3

6) Instalar maryUI (UI para Livewire basada en DaisyUI + Tailwind)

7) Crea el layout base (Blade)

8) Tu primer componente Livewire + maryUI

9) Servidores locales y script de desarrollo “todo en uno”

10) Ajustes útiles para desarrollo

11) Despliegue (muy breve)

12) Problemas frecuentes (y cómo resolverlos)

13) Siguiente paso sugerido

0 comentarios

Dejar un comentario

Tutoriales relacionados

1) Requisitos y versión mínima

2) Crear el proyecto Laravel 12

Opción A — Laravel Installer

Opción B — Composer (si no usas el Installer)

3) Configuración inicial de entorno

4) Instalar Tailwind CSS 4 con Vite en Laravel 12

5) Instalar Livewire 3

6) Instalar maryUI (UI para Livewire basada en DaisyUI + Tailwind)

7) Crea el layout base (Blade)

8) Tu primer componente Livewire + maryUI

9) Servidores locales y script de desarrollo “todo en uno”

10) Ajustes útiles para desarrollo

11) Despliegue (muy breve)

12) Problemas frecuentes (y cómo resolverlos)

13) Siguiente paso sugerido

0 comentarios

Dejar un comentario

Tutoriales relacionados

Instalación completa: Laravel 12 + Livewire 3 + maryUI + Tailwind 4

Cómo montar una API en tu proyecto Laravel 12 existente (y crear un CRUD de clientes) — Guía en 5 minutos

Uuid en Laravel: Cómo Usarlos Como Llave Primaria o Identificador Alterno

Query Scopes en Laravel: Global y Local Scopes