Tailwind CSS 3.0: Fundamentos

Aprenderás en qué consiste Tailwind CSS, el framework CSS que está cambiando la forma de trabajar con CSS. Descubrirás y experimentarás qué es lo que lo hace diferente a los demás.

Este curso te ahorrará el trabajo de estudio e investigación, y aprenderás los fundamentos desde cero hasta ser capaz de hacer cualquier web que te propongas.

Aprende a usar Tailwind CSS en este curso exhaustivo.

• Adapta la página a diferentes tamaños de pantalla (responsive design)

• Aplica estados CSS

• Diseña un modo oscuro

• Reutiliza tus estilos (principio don't repeat yourself)

• Aprende a instalar y usar plugins

Tailwind CSS es el framework CSS más popular del momento, con un enfoque muy diferente al CSS estándar.

Normalmente, cuando quieres aplicar estilo a tus páginas web, has escrito CSS. Tailwind CSS te da clases predefinidas que puedes incluir en tu HTML directamente.

El framework abarca todo lo que puedas necesitar: colores, tamaños, tipos de fuentes, márgenes, espaciados, flexbox, esquinas redondeadas, sombras, etc. Así puedes escribir un diseño totalmente personalizado sin necesidad de escribir nada de CSS.

Esta forma de trabajar te aporta varias ventajas. Por ejemplo:

• No gastas energía en elegir nombres de clases.

• No tienes un archivo CSS que mantener.

• Los estilos son locales en cada página.

Los frameworks basados en clases de utilidad, como Tailwind CSS, ya están siendo usados por empresas tan conocidas como GitHub, Heroku, Twitch o Kickstarter. Netflix incluso ya está usando Tailwind CSS en su página de series y películas más vistas. La tendencia de uso es cada vez mayor en el mercado.

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.

Resumen del curso:

• Empezarás instalando Node. Es la base para instalar los paquetes necesarios.

• Configurarás Visual Studio Code, y te enseñaré los plugins que uso para trabajar cómodamente.

• Instalarás Tailwind CSS y sus dependencias, dejándolo todo listo para empezar a trabajar.

• Construirás una landing page tipo Netflix, optimizada para móviles.

• Adaptarás la página a diferentes tamaños de pantalla. Lo que se conoce como responsive design.

• Añadirás estados CSS, como por ejemplo cuando pasas el ratón encima de un botón.

• Sabrás configurar tu página con un modo oscuro automático.

• Para evitar repetir código, sabrás crear clases personalizadas que podrás reutilizar.

Controlarás, además, los 4 plugins oficiales de Tailwind CSS:

• Typography: para poner estilo a textos (por ejemplo, los que vienen de una base de datos)

• Forms: para dar forma a los formularios

• Aspect-Ratio: para controlar la relación de aspecto de las imágenes

• Line-Clamp: para limitar textos y conseguir una buena armonía visual

Además:

• Tras cada módulo de lecciones, harás un test de conocimientos para comprobar que no se te haya escapado nada importante.

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

Con este curso te lo pongo fácil y práctico para que tengas una buena base y puedas construir cualquier página que te propongas, con lecciones claras y prácticas.

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.

Y por supuesto, si tienes dudas puedes exponerlas en la sección de preguntas y respuestas, donde las iré respondiendo.

¡Nos vemos dentro!