Maquetando formularios con Tailwind
Clase 4 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Vargas Lopez
student•
hace 3 años
Clase 4 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Vargas Lopez
Brenda Sutara
Reinaldo Mendoza
Ricardo Arquimedes Castro Quintero
LUIS ANTONIO CALVO QUISPE
Cesar Eduardo Valle Pino
Héctor Danilo Sebastián Salinas Ugalde
Luis Angel
Platzi Team
Reinaldo Mendoza
Juan Rossano
npm install -D @tailwindcss/forms require('@tailwindcss/forms'),
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
<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 </h2> <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>
Perfecto
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 ..
Divide Line
Si utilizan yarn deben colocar: yarn add -D @tailwindcss/forms
Está muy desactualizado y no renderiza los estilos de tailwind/forms Alguien lo pudo resolver?
Si cambio el font-size global de la app, las unidades rem siguen siendo las mismas en taildwind?
No si lo veremos mas adelante, pero hay alguna forma de declarar en un archivo css tus estilos básicos y luego importarlo en styles.css, por ejemplo estilos para los inputs, botones etc. para evitar un spaghetti de clases!
Usando tailwind precisamente se evita eso
Aqui estamos cambiando el color del borde pero solo para el input de este formulario ¿no es la ventaja de usar Tailwind crear un estilo propio? ¿No habria que modificar ese estilo para que aplique automaticamente a toda la aplicacion? Quizas lo veamos mas adelante