usite-sas-bic/sirpremiumv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clases arbitrarias de Tailwind con valores de runtime

Browse Source 
Al dejar el CDN quedaron muertas todas las clases del tipo bg-[{{ $var }}]:
el JIT del navegador las resolvía en caliente, pero el build solo ve el
literal con la expresión Blade dentro y no genera ninguna regla. No falla
el build, simplemente el estilo desaparece.

El caso visible era el modal de "ver promoción": bg-[url({{ asset(...) }})]
dejaba un bloque blanco de 16rem donde debía ir la imagen.

Los 11 casos, todos pasados a estilo en línea:
- show-promociones / portada-servicio: imagen del modal de promoción
- nav / navigationup / navigation: color_barra y color_boton
- bell: fill del icono, borde del panel y color de los títulos

En nav.blade.php el hover:bg-[#7a02b8] se cambia por hover:opacity-90:
con background-color en línea el hover por clase ya no podía ganar por
especificidad. Es el mismo patrón que ya usaba navigationup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
2026-08-01 22:34:00 +00:00
co-authored by Claude Sonnet 4.6
parent 84367f2e23
commit 203c0808a1
9 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/build/assets/app.6f241e5c.css
-1
View File
File diff suppressed because one or more lines are too long
public/build/assets/app.e210407e.css
+1
View File
File diff suppressed because one or more lines are too long
public/build/manifest.json
+1 -1
View File
@@ -5,7 +5,7 @@
"isEntry": true
},
"resources/css/app.css": {
"file": "assets/app.6f241e5c.css",
"file": "assets/app.e210407e.css",
"src": "resources/css/app.css",
"isEntry": true
}
resources/views/layouts/nav.blade.php
+3 -3
View File
@@ -1,4 +1,4 @@
<nav class="bg-[{{App\Models\Configuracione::Orderby('id','desc')->first()->color_barra}}] border-b border-gray-100 rounded-b-3xl shadow ">
<nav class="border-b border-gray-100 rounded-b-3xl shadow" style="background-color: {{ App\Models\Configuracione::Orderby('id','desc')->first()->color_barra }};">
<!-- Primary Navigation Menu -->
<div class="md:w-[85%] mx-auto px-4 sm:px-6 lg:px-8 py-1">
<div class="flex justify-between h-16">
@@ -24,10 +24,10 @@
@if (Route::has('login'))
<div class="">
@auth
<a href="{{ url('/dashboard') }}" class=" text-white px-4 py-2 rounded-lg bg-[{{App\Models\Configuracione::Orderby('id','desc')->first()->color_boton}}] hover:bg-[#7a02b8]">Dashboard</a>
<a href="{{ url('/dashboard') }}" class="text-white px-4 py-2 rounded-lg hover:opacity-90 transition-opacity" style="background-color: {{ App\Models\Configuracione::Orderby('id','desc')->first()->color_boton }};">Dashboard</a>
@else
<div class="space-x-8 sm:-my-px sm:ml-6 flex text-white items-center">
<a href="{{ route('login') }}" class="text-sm sm:text-base flex px-4 py-2 rounded-lg bg-[{{App\Models\Configuracione::Orderby('id','desc')->first()->color_boton}}] hover:bg-[#7a02b8]">Iniciar sesión
<a href="{{ route('login') }}" class="text-sm sm:text-base flex px-4 py-2 rounded-lg hover:opacity-90 transition-opacity" style="background-color: {{ App\Models\Configuracione::Orderby('id','desc')->first()->color_boton }};">Iniciar sesión
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" x="0px" y="0px" stroke="currentColor" class="w-[0.87rem] ml-2 ">
resources/views/layouts/navigation.blade.php
+1 -1
View File
@@ -5,7 +5,7 @@
@endphp
<aside x-cloak :class="openAside ? 'translate-x-0' : '-translate-x-full'" class="z-20 fixed inset-y-0 left-0 w-64 transform transition-transform duration-300 ease-in-out min-h-screen shadow-lg flex flex-col" style="background: {{ $bg }};">
<div class="flex items-center justify-between px-4 py-3 text-white border-b border-white/20 sticky top-0 bg-[{{ $bg }}] z-30">
<div class="flex items-center justify-between px-4 py-3 text-white border-b border-white/20 sticky top-0 z-30" style="background-color: {{ $bg }};">
<div class="w-20">
<x-application-logo />
</div>
resources/views/layouts/navigationup.blade.php
+2 -2
View File
@@ -1,7 +1,7 @@
@php
$config = App\Models\Configuracione::orderBy('id', 'desc')->first();
@endphp
<nav class="bg-[{{ $config->color_barra }}] border-b border-white/10 shadow-md">
<nav class="border-b border-white/10 shadow-md" style="background-color: {{ $config->color_barra }};">
<div class="md:w-[90%] mx-auto px-3 sm:px-4 lg:px-6">
<div class="flex items-center h-16 gap-2 sm:gap-3">
@@ -44,7 +44,7 @@
{{-- Botón Cargar saldo (oculto para editor/administrador) --}}
@if (!in_array(auth()->user()->rol->nombre, ['editor', 'administrador']))
<a href="{{ route('recarga') }}" class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-white text-sm font-medium bg-[{{ $config->color_boton }}] hover:opacity-90 transition-opacity">
<a href="{{ route('recarga') }}" class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-white text-sm font-medium hover:opacity-90 transition-opacity" style="background-color: {{ $config->color_boton }};">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-3.5 h-3.5 fill-white flex-shrink-0">
<path d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z"/>
</svg>
resources/views/livewire/bell.blade.php
+3 -3
View File
@@ -1,5 +1,5 @@
<div class="flex justify-center items-center" x-data="{ menuNotificaciones: @entangle('menuNotificaciones') }">
<div class="fill-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] relative cursor-pointer" wire:click="$refresh" @click="menuNotificaciones=!menuNotificaciones">
<div class="relative cursor-pointer" style="fill: {{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }};" wire:click="$refresh" @click="menuNotificaciones=!menuNotificaciones">
@if ($numNoti != 0)
<span class="absolute top-0 left-0 bg-red-500 rounded-full w-5 h-5 flex justify-center items-center text-xs text-white">
{{ $numNoti > 9 ? '9+' : $numNoti }}
@@ -10,11 +10,11 @@
</svg>
</div>
<div x-cloak x-show="menuNotificaciones" @click.outside="menuNotificaciones = false" class="absolute top-14 right-2 md:right-32 rounded-lg border overflow-y-auto border-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] bg-white w-72 md:w-96 h-96 z-50">
<div x-cloak x-show="menuNotificaciones" @click.outside="menuNotificaciones = false" class="absolute top-14 right-2 md:right-32 rounded-lg border overflow-y-auto bg-white w-72 md:w-96 h-96 z-50" style="border-color: {{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }};">
<ul class="p-4">
@forelse ($consulta as $item)
<li class="px-2 py-1 mb-2 border border-gray-300 rounded-lg relative" wire:loading.class="opacity-50 cursor-wait">
<h4 class="font-bold text-base text-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}]">
<h4 class="font-bold text-base" style="color: {{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }};">
{{ $item->titulo }}
</h4>
<p class="text-sm">
resources/views/livewire/portada-servicio.blade.php
+3 -1
View File
@@ -71,7 +71,9 @@
<div class="grid h-full place-items-center">
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/3 lg:1/3 xl:w-1/4">
{{-- PHOTO --}}
<div class="w-full text-left text-white px-4 bg-cover py-2 rounded-lg h-64 bg-[url({{asset($this->imagen)}})]">
{{-- URL de runtime: no puede ser clase arbitraria de Tailwind --}}
<div class="w-full text-left text-white px-4 bg-cover bg-center py-2 rounded-lg h-64"
style="background-image: url('{{ asset($this->imagen) }}');">
</div>
<div class="text-left">
resources/views/livewire/show-promociones.blade.php
+5 -2
View File
@@ -461,8 +461,11 @@
<div class="grid h-full place-items-center">
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/3 lg:1/3 xl:w-1/4">
{{-- PHOTO --}}
<div
class="w-full text-left text-white px-4 bg-cover py-2 rounded-lg h-64 bg-[url({{ asset($this->imagen) }})] ">
{{-- La URL sale en runtime, así que no puede ir como clase
arbitraria de Tailwind: el build no la ve y no genera
nada. Va como estilo en línea. --}}
<div class="w-full text-left text-white px-4 bg-cover bg-center py-2 rounded-lg h-64"
style="background-image: url('{{ asset($this->imagen) }}');">
</div>