Maquetando formularios con Tailwind

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Introducción

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

Tomar examen

Maquetando formularios con Tailwind

Comentarios

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>

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind