Configuración y Personalización de Plantillas con Tailwind CSS

Clase 4 de 26 • Curso de Interfaces Dinámicas con Laravel Livewire

David Martínez López

student•

La verdad que no tenía muy claro cómo manejar los estilos con Tailwind, y menos usando vite. Muchas gracias por esta clase.

Iván Andrés Pineda Salazar

student•

Vamos bien

Dave Juanes

student•

Mil gracias Italo, me gustaria un curso de laravel completo un proyecto con dashboard, panel admin, roles, pero siempre ando contento con tus cursos!

Oscar Ivan Hernandez Manrique

student•

con el comando nom run dev no puedo visualizar la pagina y si luego de ejecutar con el comando php artisan serve no me ejecuta el gradiente que puede ser?

Walter Omar Barrios Vazquez

student•

probá con npm run build

Gustavo Pú

student•

Configura tu vite

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [...refreshPaths, 'app/Http/Livewire/**'],
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
    }
})

Juan Antonio Galdo Ustares

student•

y ya en produccion como haces para desplegar la pagina con los estilos?

por que no se muestran los estilos sin el vite?

Diego Iván Cundapí León

student•

ahora todo lo que tiene que ver con tailwild toma mas sentido, venia muy perdido de la introduccion a laravel

Alexander Muñoz Castro

student•

Profe , como hago para que esto me funcion en este año 2025, a mi no me cambia el estilo , ya probé todo lo que dicen aqui . que mas puedo hacer?

Anthony Frankis

student•

Hola, como estas ?

Debes ir al archivo "vite.config.js" ubicado en la ruta de tu proyecto. alli eliminas todo y pegas este codigo:

import { defineConfig } from 'vite' import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: [...refreshPaths, 'app/Http/Livewire/**'], }), ], server: { hmr: { host: 'localhost', }, } })

Luego te vas al archivo "app.js" ubicado en la ruta: resources/js/

y comentas las lineas despues de la linea import './bootstrap';

te debe quedar asi:

import './bootstrap'; /*import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();*/

Espero te ayude!

Configuración y Personalización de Plantillas con Tailwind CSS

Introducción

Desarrollo de un Foro Interactivo con Laravel y Livewire

Integración de Laravel, Livewire y Tailwind CSS para diseño web profesional

Configuración base

Configuración Inicial de Proyectos Laravel con Visual Studio Code

Configuración y Personalización de Plantillas con Tailwind CSS

Creación de Componentes Livewire para Listado de Preguntas

Creación de Categorías Dinámicas con Laravel

Configuración de Preguntas en Laravel: Migraciones y Factory

Diseño de Interfaz para Visualización de Preguntas en Navegador

Configuración y Uso de Comandos Fresh y Refresh en Laravel

Preguntas

Diseño y Configuración de Listado de Preguntas en Laravel

Filtrado Reactivo de Datos con Livewire y PHP

Filtrado de Preguntas por Categoría en PHP

Pregunta

Creación de Componente Livewire para Visualización de Pregunta Individual

Creación de Formularios y Respuestas con Livewire en PHP

Respuesta

Desarrollo de componente LiveWire para respuestas en Laravel

Creación de Componentes para Estructuras Anidadas en Formularios

Creación de Formularios Livewire para Respuestas Anidadas

Editar Respuestas con Livewire en PHP: Configuración y Pruebas

Creación de Políticas de Seguridad en Laravel para Edición de Respuestas

Flujo de trabajo tradicional

Formulario de Edición de Preguntas en Laravel

Habilitación de Campos en Formularios Web

Actualizar Preguntas desde Formularios en Tablas de Datos

Creación y Edición de Preguntas en Plataforma Web

Configuración de Políticas de Autorización en Laravel

Conclusiones

Optimización de Consultas en Laravel para Mejorar Rendimiento

Implementación de Livewire con Laravel para Proyectos Reactivos