npm install -D @tailwindcss/forms
require(’@tailwindcss/forms’),
Introducción
¿Qué es el Angular CDK?
Instalando Angular CDK y TailwindCSS
Maquetando con Tailwind
Maquetando la página de login con Tailwind
Maquetando formularios con Tailwind
Componente de botón reutilizable
Reto: colores y propiedades dinámicas
Componentes interactivos con Angular CDK
Creando Overlays
Múltiples Overlays
Iconos en Angular con Font Awesome
Creando acordeones
Acordeones dinámicos
Drag and drop
Drag and drop con ordenamiento
Drag and drop con transferencia entre columnas
Drag and drop con columnas dinámicas
Modales y listas
Modales y diálogos
Modales recibiendo información
Listas con scroll
Listas con virtual scrolling
Table CDK
Tablas
Estilos en Tablas
Usando un DataSource en Tablas
Tablas con filtros y debounce
Próximos pasos para completar el Clon de Trello
Mejoras en UX y reusabilidad
Toma el Curso de Autenticación con Angular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 5
Preguntas 3
npm install -D @tailwindcss/forms
require(’@tailwindcss/forms’),
Plugin form tailwind
npm install -D @tailwindcss/forms
require(’@tailwindcss/forms
Para hacer la lÃnea divisoria, se puede utilizar la clase divide-y, en el contenedor padre
<div class="divide-y">
<button
class="w-full rounded text-sm font-medium text-white bg-green-600 px-5 py-2"
type="submit">
Log IN
</button>
<div class="flex justify-center items-center space-x-4 pt-4 mt-4">
<a class="text-sky-600" href="#">Can't log in?</a>
<a class="text-sky-600" href="#">Sign up for an account</a>
</div>
</div>
Para más detalle, pueden revisar la documentación …
Aca tengo mi maquetado, saqué algunas imagenes del propio trello y coloqué colores personalizados. Me costó un montón poner el fixed botton-0 y que me quedara bien, tengo que repasar CSS
dejo mi código
<div class="w-screen h-screen bg-white sm:bg-gray-100 relative">
<div class="absolute w-full h-full bg-gray-100 hidden sm:block">
<img
class="absolute w-60 lg:w-80 left-0 bottom-0"
src="/assets/svg/login-bg-left.svg"
alt="bg left"
/>
<img
class="absolute w-60 lg:w-80 right-0 bottom-0"
src="/assets/svg/login-bg-rigth.svg"
alt="bg rigth"
/>
</div>
<!-- Contenido de Inicio -->
<div class="relative w-full sm:w-96 m-auto">
<!-- Logo -->
<header class="py-10 flex justify-center">
<img
class="w-48"
src="/assets/svg/trello-logo-blue.svg"
alt=""
/>
</header>
<!-- FIN Logo -->
<!-- Caja blanca de formulario -->
<div class="bg-white rounded shadow-none sm:shadow-lg p-8">
<div class="mb-4">
<h1 class="font-bold text-blue-p text-base text-center pb-7">
Iniciar sesión en Trello
</h1>
<form novalidate class="space-y-4">
<div class="relative">
<input
class="w-full bg-gray-50 rounded border-2 border-gray-300"
type="text"
placeholder="Introduzca el correo electrónico"
/>
</div>
<div class="relative">
<button
class="w-full bg-green-apple hover:bg-green-apple-light text-white rounded p-2 text-base font-bold"
>
Continuar
</button>
</div>
</form>
<!-- Iniciar sesión de otro modo -->
<div class="py-2">
<p class="font-light text-center text-gray-600">O</p>
<div class="relative my-4">
<button
class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center hover:bg-gray-50"
>
<img class="w-4 mr-2" src="/assets/icon/google.png" alt="">
Continuar con Google
</button>
</div>
<div class="relative my-4">
<button
class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center"
>
<img class="w-4 mr-2" src="/assets/icon/microsoft.png" alt="">
Continuar con Microsoft
</button>
</div>
<div class="relative my-4">
<button
class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center"
>
<img class="w-4 mr-2" src="/assets/icon/apple.png" alt="">
Continuar con Apple
</button>
</div>
<div class="relative my-4">
<button
class="w-full flex align-center justify-center shadow-md rounded p-2 text-sm font-bold text-blue-p text-center"
>
<img class="w-4 mr-2" src="/assets/icon/slack.png" alt="">
Continuar con Slack
</button>
</div>
</div>
<!-- FIN Iniciar sesión de otro modo -->
<hr class="my-4 border-b-1 border-r-gray-300" />
<div class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 flex-col md:flex-row">
<ul class=" flex flex-col justify-center">
<li class="text-blue-600 font-light text-sm text-center pb-2 after:content-['•']">
<a href="" >
¿No puede iniciar sesión?
</a>
</li>
<li class="text-blue-600 font-light text-sm text-center">
<a href="">
RegÃstrese para crear una cuenta
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Caja blanca de formulario -->
<div class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 flex-col md:flex-row py-6">
<a href="" class="text-blue-600 font-light text-xs" >
PolÃtica de Privacidad
</a>
<span class="text-gray-500 hidden md:block">•</span>
<a href="" class="text-blue-600 font-light text-xs text-center">
Condiciones de servicio
</a>
</div>
<div class="flex justify-center flex-col w-96 fixed bottom-0 pb-10">
<hr class="border-b-2 border-r-gray-500">
<div class="flex justify-center">
<img class="w-40 my-4" src="/assets/svg/atlassian-logo-blue-small.svg" alt="">
</div>
<div>
<ul class="flex justify-center gap-2">
<li class="font-light text-gray-500 text-xs">
<a href="">Templates</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">Pricing</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">Apps</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">Jobs</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">Blog</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">Developers</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">About</a>
</li>
<li class="font-light text-gray-500 text-xs">
<a href="">Help</a>
</li>
</ul>
</div>
</div>
</div>
<!-- FIN Contenido de Inicio -->
</div>
Si utilizan yarn deben colocar:
yarn add -D @tailwindcss/forms
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?