Como Usar Tailwind CSS en HTML Puro

Nube Colectiva

hace 8 meses

En esta página:

Demo Github

El framework Tailwind CSS brinda componentes de interfaz de usuario profesionales.

Usarlo en una página web creada con HTML es muy fácil.

En este tutorial te enseñaré a Como Usar Tailwind CSS en HTML Puro, vamos con ello.

Tailwind CSS hace posible que los usuarios que visitan tu web tengan una experiencia agradable

Vamos a seguir los pasos y recomendaciones de la misma herramienta Tailwind CSS para mantener las buenas prácticas.

Tailwind CSS nos recomienda hacer uso de su CDN en una página creada con HTML.

Para usar su CDN colocamos <script src=”https://cdn.tailwindcss.com”></script> entre las etiquetas <head></head>:


<head>
  <meta charset="utf-8">
  <title>Home - Mi Proyecto</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CDN de Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Hoja de estilos CSS Personalizada -->
  <link rel="stylesheet" href="css/estilos.css">

</head>

<head>

<title>Home - Mi Proyecto</title>

</head>

Una ves que tenemos instanciada la CDN de Tailwind CSS en nuestra página web, podemos hacer uso de sus clases CSS, para crear elementos en nuestra interfaz web.

Para este tutorial voy a mostrar un formulario de Newsletter que tendrá una caja de texto para el email y un botón a su lado derecho.

Entonces agrego el siguiente código HTML con clases CSS de Tailwind CSS para el formulario de Newsletter:


<!-- Newsletter -->
<div class="mx-auto max-w-7xl p-4">
  <div class="w-full mb-4 mt-4">
    <h2 class="text-2xl font-extrabold text-center"> Newsletter </h2>
  </div>
  <form method="post">
    <div class="md:flex md:items-center mb-6">
      <div class="md:w-1/2">
        <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name"> Email: </label>
      </div>
      <div class="md:w-2/3 mr-2">
        <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="email" placeholder="micorreo@mail.com" required>
      </div>
      <div class="md:w-2/3">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit"> Aceptar </button>
      </div>
    </div>
  </form>
</div>

<h2 class="text-2xl font-extrabold text-center"> Newsletter </h2>

</div>

<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name"> Email: </label>

</div>

</div>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit"> Aceptar </button>

</div>

</form>

</div>

Si voy al navegador debo de ver mi formulario de Newsletter creado con Tailwind CSS:

Este formulario creado con Tailwind CSS, es adaptable a los dispositivos móviles

Así de fácil puedes Usar Tailwind CSS en HTML Puro.

Al inicio de este tutorial he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.

Aprende a Como Instalar Tailwind CSS en WordPress.

Conclusión

En este articulo has aprendido a Como Usar Tailwind CSS en HTML Puro.

Saber hacerlo te servirá de base para crear interfaces de usuario más avanzadas con Tailwind CSS.

Recuerda practicar mucho, solo así dominarás el framework Tailwind CSS.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.