Tailwind CSS es una potente herramienta para el desarrollo frontend. Está dentro de la clasificación de los frameworks CSS o también llamados frameworks de diseño. Permite a los desarrolladores y diseñadores aplicar estilos a los sitios web de una manera ágil y optimizada.
Las hermosas interfaces de usuario personalizadas se pueden construir de manera efectiva usando CSS sin realmente poner mucho esfuerzo de codificación.
Al ser un framework utility-first, Tailwind CSS ofrece la ventaja de diseñar cada componente de manera distintiva, de la manera que desees.
Adaptando la form follow function o “función de seguimiento de formulario”, el nombre de la clase de utilidad predice la función exacta de esa clase para facilitar el diseño.
Tailwind combina las propiedades CSS más críticas que se pueden personalizar y ampliar de acuerdo con los requisitos del proyecto.
Descripción
Tailwind CSS es un framework moderno y cada día más popular, que está cambiando la forma de trabajar con CSS.
Su apuesta es bastante radical: usar el HTML para definir los estilos de la página. Interesante, ¿verdad? Pero… ¿por qué no usar entonces estilos inline? Bueno, Tailwind CSS es bastante superior a eso, y en este curso te lo mostraré, ahorrándote el trabajo de estudio e investigación.
Te puede interesar también:
- Introducción al Análisis de Datos con Microsoft Excel (Curso Gratis)
- ¡Descubre el fascinante mundo de la Criptografía Aplicada en este curso Gratis!
- ¡Descubre el fascinante mundo de los Negocios Internacionales con este curso Gratis!
A modo de ejemplo, y como proyecto del curso, construirás una landing page de una web tipo Netflix, usando las clases de utilidad de Tailwind CSS. La irás mejorando y completando poco a poco con características como las siguientes:
- Adaptabilidad a diferentes tamaños de pantalla (responsive)
- Estados CSS
- Modo oscuro
- Reutilización de estilos (don’t repeat yourself)
Aprenderás a usar, de forma muy práctica, los 4 plugins oficiales de Tailwind CSS:
- TailwindCSS-Typography: para poner estilo a textos (por ejemplo, los que vienen de una base de datos)
- TailwindCSS-Forms: para dar forma a los formularios
- TailwindCSS-Aspect-Ratio: para controlar la relación de aspecto de las imágenes
- TailwindCSS-Line-Clamp: para limitar textos y conseguir una buena armonía visual
Usarás el motor Just-in-Time desde el principio. Es una de sus novedades más recientes e interesantes, y será su modo de trabajo por defecto en la versión 3.0, por lo que he diseñado el curso pensando en este motor.
Tailwind CSS ya lo usan muchas webs, entre ellas algunas muy populares como GitHub, Heroku, Kickstarter o Twitch.
Creo que vale la pena aprender este framework, porque define una forma de trabajar muy diferente y útil, que ya está siendo copiada por otros frameworks. Con este curso te lo pongo fácil y muy práctico para que tengas una buena base y puedas construir cualquier página que te propongas.
Si aún no te has decidido, puedes ver gratuitamente la lección donde construimos una página desde cero. Así ves todo el proceso.
El curso está vivo, y lo iré actualizando a medida que Tailwind CSS evolucione. También tienes acceso al repositorio donde publico el código fuente de las páginas.
Tras cada módulo de lecciones, harás un test de conocimientos para comprobar que no se te haya escapado nada importante.
Y por supuesto, si tienes dudas puedes exponerlas en la sección de preguntas y respuestas, donde las iré respondiendo.
Fundamentos de Tailwind CSS
La nueva generación de CSS con el motor Just-in-Time
¿Para quién es este curso?
- Diseñadores y desarrolladores web que quieran mejorar sus habilidades de frontend
- Estudiantes con conocimientos de HTML y CSS que quieran aprender una nueva forma de trabajar
- Quien quiera aprender nuevas tecnologías en desarrollo web
Requisitos
- HTML y CSS básico
- Usar un editor de código
Lo que aprenderás
- Instalar y configurar el entorno ideal para trabajar con Tailwind CSS
- Construir una página desde cero, siguiendo los últimos estándares de desarrollo web
- Adaptar la página a diferentes tamaños de pantalla (responsive design)
- Aplicar estados CSS
- Implementar un modo oscuro automático
- Reutilizar clases (don’t repeat yourself)
- Usar los 4 plugins oficiales de Tailwind CSS
- Usar el motor Just-in-Time
Este curso se encuentra de manera gratuita gracias a un cupón que podrás encontrar aquí abajo.
Toma en cuenta que este tipo de cupones duran por muy poco tiempo.
Si el cupón ya ha expirado podrás adquirir el curso de manera habitual.
La fecha estimada de finalización del cupón es para el día 29 de septiembre, pero puede vencer en cualquier momento.
Preguntas y respuestas sobre los cupones
Un cupón de descuento permite adquirir un curso con una cierta rebaja del precio original. Facialix solo comparte aquellos que son al 100%, con lo cual se rebaja el precio total y puede ser adquirido de manera gratuita.
Es imposible saber el tiempo exacto ya que solo Udemy o el instructor pueden personalizar variables (tiempo, cantidad, etc.) para definir un tiempo límite. Con base a nuestra experiencia, lo máximo que puede durar son 3 días y lo mínimo unos 10 minutos.
No, como ya dijimos los cupones pueden vencer en cualquier momento. Si aun encontraste el cupón activo te recomendamos reclamar el curso y guardarlo en tu biblioteca dentro de la plataforma.
Solo debes dar clic al botón de abajo llamado “Ir al Curso”, automáticamente te llevara a la plataforma y, si el cupón sigue activo, aplicara automáticamente el descuento. Si el descuento no aparece significa que el cupón ya venció.
En teoría es indefinidamente, pero existen casos donde los cursos son eliminados ya sea por la propia plataforma o por el instructor.
Facialix solo comparte los cursos con cupones, no se hace responsable por ningún motivo de ellos o de su disponibilidad. Si el cupón ya expiro o no da el 100% de descuento no hay mucho que se pueda hacer ya que el autor, y solo el, tiene el permiso para crear o inhabilitar los cupones de descuento, en teoría podrías ponerte en contacto con el directamente y negociar algún beneficio.
Si ya leíste las preguntas y respuestas puedes continuar.
Para obtener el curso con su cupón da clic en el siguiente botón:
Deja tus comentarios y sugerencias
Sobre Facialix
Facialix es un sitio web que tiene como objetivo apoyar en el aprendizaje y educación de jóvenes y grandes. Buscando y categorizando recursos educativos gratuitos de internet, de esta manera Facialix ayuda en el constante aprendizaje de todos.
