Como Usar Tailwind CSS en HTML Puro

2 minuto(s)

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.

Página web creada con HTML usando Tailwind CSS
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>:


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:


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

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.

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.