Maquetando formularios con Tailwind

Clase 4 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Clase anteriorSiguiente clase

Diego Vargas Lopez

student•

npm install -D @tailwindcss/forms require('@tailwindcss/forms'),

Brenda Sutara

student•

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
        </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

student•

Perfecto

Ricardo Arquimedes Castro Quintero

student•

Plugin form tailwind

npm install -D @tailwindcss/forms
require(’@tailwindcss/forms

Fuente: https://github.com/tailwindlabs/tailwindcss-forms

LUIS ANTONIO CALVO QUISPE

student•

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

Cesar Eduardo Valle Pino

student•

Si utilizan yarn deben colocar: yarn add -D @tailwindcss/forms

Héctor Danilo Sebastián Salinas Ugalde

student•

Está muy desactualizado y no renderiza los estilos de tailwind/forms Alguien lo pudo resolver?

Luis Angel

student•

Si cambio el font-size global de la app, las unidades rem siguen siendo las mismas en taildwind?

Platzi Team

student•

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!

Reinaldo Mendoza

student•

Usando tailwind precisamente se evita eso

Juan Rossano

student•

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

<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>

<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>

Maquetando formularios con Tailwind

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