Hola, si no quieres escribir todos los estilos del profe, puedes copiarlos del siguiente commit, también viene incluido el cdn de tailwind por si lo olvidaste:
https://github.com/AbnirHencazs/tag-tdd/tree/c535da1e2901607385d88b01137d06dab54bf280
Introducción
Todo lo que aprenderás sobre testing con PHP y Laravel
La función del testing
PHPUnit en Laravel
Unit y Feature
Conceptos
El resultado
Probar un Helper
Accessors y Mutators
Método personalizado
Carga de archivos
Carga de archivos desde el navegador
Refactorización
Validación
Database
Proyecto
TDD
¿Qué vamos a construir?
Testing HTTP
Testing HTTP: vista con datos
Nuevo registro
Eliminar registro
Validación
Probando desde el navegador
Añadiendo estilos con Tailwind CSS
Aplicando pruebas unitarias a cambios
Conclusión
Repaso final y despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Añadiendo estilos con Tailwind CSS
22/24Recursos
¿Cómo mejorar la apariencia de un proyecto web con Tailwind CSS?
El aspecto visual de un proyecto web es fundamental para captar y retener a los usuarios. Implementar un esquema visual coherente y atractivo no solo favorece la usabilidad, sino que también comunica profesionalismo y atención al detalle. En esta guía, exploraremos cómo utilizar el potente framework Tailwind CSS para transformar un proyecto básico en una interfaz moderna y amigable.
¿Qué es Tailwind CSS y cómo se instala?
Tailwind CSS es un framework de CSS que permite crear interfaces de usuario personalizadas de manera eficiente. A diferencia de los frameworks tradicionales que imponen un estilo definido, Tailwind es altamente flexible y proporciona utilidades para diseñar según las necesidades específicas de cada proyecto.
-
Instalación de Tailwind mediante CDN: Para comenzar, copia el enlace del CDN de Tailwind CSS desde su sitio oficial. La instalación es simple y consiste en pegar este enlace en la sección
<head>de tu documento HTML.<link href="https://cdn.tailwindcss.com" rel="stylesheet"> -
Preparación del entorno: Una vez agregado, tu proyecto está listo para aprovechar la personalización de estilos. Verifica que el archivo esté vinculado correctamente actualizando el navegador y revisando los estilos básicos.
¿Cómo configurar un diseño básico con Tailwind?
Una vez instalado Tailwind, es momento de comenzar a personalizar los elementos básicos del diseño. A continuación, detallamos cómo modificar los estilos de ciertos componentes claves como el body, contenedores y formularios.
-
Body: Empieza con el color de fondo y el padding.
<body class="bg-gray-100 py-4"> -
Contenedor: Para centrar y dar un estilo básico al contenedor principal.
<div class="max-w-lg mx-auto bg-white rounded-lg shadow p-4"> -
Formulario: Adapta el diseño del formulario para hacerlo visualmente más atractivo.
<form class="flex mb-4"> <input class="rounded-l bg-gray-200 p-4 w-full border-0" placeholder="Nueva etiqueta"> <button class="rounded-r bg-blue-500 text-white px-4">Agregar</button> </form>
¿Cuál es el proceso para mejorar elementos individuales?
Con Tailwind, cada elemento puede ser mejorado y personalizado usando clases utilitarias. Aquí mostramos cómo hacerlo para títulos y botones de eliminación.
-
Título: Ajusta la apariencia usando bordes, padding y colores.
<h1 class="text-xl font-semibold py-2">Título del Proyecto</h1> -
Botón de eliminación: Establece estilos visibles y distintivos.
<button class="px-4 py-2 rounded bg-red-500 text-white">Eliminar</button>
Recomendaciones para implementar los cambios
Al implementar cambios en el diseño, es crucial:
- Pruebas: Realiza testing regularmente para asegurar que los cambios de diseño no afecten la funcionalidad.
- Iteración: Trabaja iterativamente. Empieza con cambios básicos, visualiza el impacto y ajústalos según sea necesario.
- Consistencia: Asegúrate de que el estilo sea coherente a lo largo de todo el proyecto.
Mensaje final para los estudiantes
La implementación de frameworks como Tailwind CSS te permite crear un diseño web atractivo y funcional sin complicaciones. No solo mejora la estética, sino que también facilita el proceso de mantenimiento y actualización a futuro. ¡Sigue explorando y no dudes en experimentar para encontrar la mejor configuración visual para tus proyectos!
Aportes 6
Preguntas 0
Ordenar por:
Curso Tailwind en Platzi
Les dejo el maquetado de welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 py-10">
<div class="max-w-lg bg-white mx-auto p-5 rounded shadow">
<form action="tags" method="POST" class="flex mb-4">
@csrf
<input type="text" name="name" class="rounded-l bg-gray-200 p-4 w-full outline-none" placeholder="Nueva etiqueta">
<input type="submit" value="Agregar" class="rounded-r px-8 bg-blue-500 text-white outline-none">
</form>
<h4 class="text-lg text-center mb-4">Listado de Etiquetas</h4>
<table>
@forelse ($tags as $tag)
<tr>
<td class="border px-4 py-2">{{ $tag->name }}</td>
<td class="px-4 py-2">
<form action="tags/{{ $tag->id }}" method="post">
@csrf
@method('delete')
<input type="submit" value="Eliminar" class="px-3 rounded bg-red-500 text-white">
</form>
</td>
</tr>
@empty
<tr>
<td>
<p>No hay etiquetas</p>
</td>
</tr>
@endforelse
</table>
</div>
</body>
</html>
Mi aporte no tiene nada que ver con TDD pero en tailwind es mejor usar la misma paleta de colores o acentos para obtener un mejor resultado.
En lugar de usar text-white en los botones podemos combinar asi:
bg-red-500 text-red-100
bg-blue-500 text-blue-100
Tailwind documentación:
https://tailwindcss.com/docs/installation
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
## 🦄✨Decidí conservar los colores de Laravel y hacer estilos responsivos. Así me quedó :3
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?