Maquetando formularios con Tailwind
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Maquetando formularios con Tailwind
Contenido del curso
Maquetando formularios con Tailwind
Diego Vargas Lopez
Estudiantenpm install -D @tailwindcss/forms require('@tailwindcss/forms'),
Brenda Sutara
EstudianteAca 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>
Reinaldo Mendoza
EstudiantePerfecto
Ricardo Arquimedes Castro Quintero
EstudiantePlugin form tailwind
npm install -D @tailwindcss/forms require(’@tailwindcss/forms
LUIS ANTONIO CALVO QUISPE
EstudiantePara 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
Cesar Eduardo Valle Pino
EstudianteSi utilizan yarn deben colocar: yarn add -D @tailwindcss/forms
Héctor Salinas
EstudianteEstá muy desactualizado y no renderiza los estilos de tailwind/forms Alguien lo pudo resolver?
Luis Angel
EstudianteSi cambio el font-size global de la app, las unidades rem siguen siendo las mismas en taildwind?
César Rotela
EstudianteNo 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!
Reinaldo Mendoza
EstudianteUsando tailwind precisamente se evita eso
Juan Rossano
EstudianteAqui 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