Este es el Manual de TailwindCSS un popular framework de CSS de nueva generación que aporta sencillez en el desarrollo y agilidad para la apliación de estilos.
Tailwind viene a hacer la competencia a otras alternativas como Bootstrap, con un enfoque que aporta numerosas ventajas, como la sencillez de aplicación de los estilos, la facilidad para subreescribirlos, la optimización del código resultante, etc.
El enfoque de TailwindCSS se conoce de manera genérica como "atomic CSS" y consiste en especificar los estilos con clases muy concisas, que afectan generalmente a un único atributo, aplicando cierto valor. Para crear componentes por tanto se tienen que aplicar numerosas clases, lo que puede parecer un inconveniente, pero con un estudio minucioso se transforma en una verdadera optimización del CSS de los proyectos.
En este manual iremos recorriendo las características de TailwindCSS y el modo de usarlo, para poder comenzar a sacar partido a esta estupenda herramienta de desarrollo web.
Este manual está en proceso de creación!! Vuelve pronto para encontrar más artículos publicados.
En Manual de TailwindCSS encuentras:
Artículos del manual
-
Introducción a Tailwind CSS
En estos primeros artículos queremos ofrecer una introducción al framework CSS Tailwind. Nuestro objetivo consiste en ofrecer una vista de pájaro sobre cómo se trabaja con Tailwind y cómo organizarás tu código CSS para sacar partido a las clases de utilidad pero no desesperarte por ensuciar el HTML. Después de estos artículos tendrás suficiente conocimiento para implementar Tailwind CSS en un proyecto, pero no para sacarle todo el partido que en realidad ofrece.
-
1
Primeros pasos con TailwindCSS
En este primer artículo vamos a abordar toda la parte de la instalación y puesta en marcha de Tailwind dentro de un proyecto vacío, usando PostCSS.
-
2
Por qué usar Tailwind CSS
Por qué usar el framework Tailwind CSS, los motivos por los que es una excelente herramienta para un desarrollo ágil y optimizado de los estilos en sitios web.
-
3
Directiva @apply en TailwindCSS
En este artículo te vamos a mostrar cómo Tailwind CSS resuelve la necesidad de crear componentes reutilizables, usando la directiva @apply, que nos ahorrará ensuciar el HTML y no repetir código de las clases.
-
Variantes de las clases de utilidad
La magia de Tailwind CSS está detrás de las clases de utilidad y lo más impresionante del framework aparece cuando conoces las variantes que éstas ofrecen. Todas las clases de utilidad del framework se multiplican, en número y posibilidades, cuando sabes qué son las variantes y cómo aplicarlas para poder hacer diseños adaptables y conseguir aplicar estilos a todas las pseudoclases. En los siguientes artículos aprenderás a aplicar variantes para diseños responsive y para definir estilos cuando el usuario interacciona con la página.
-
4
Diseño responsive en Tailwind CSS
Abordaremos una de las ventajas de uso de Tailwind CSS a la hora de generar diseños adaptables y veremos las clases de utilidad con sus variantes responsive, que afectarán a determinadas anchuras de pantalla.
-
5
Usar variantes en Tailwind para aplicar estilos a pseudo-clases CSS
Cómo las variantes de Tailwind se pueden aplicar para definir estilos personalizados también para las pseudo-clases de CSS. Cómo la directiva @apply soporta también la aplicación de las variantes, para conseguir un HTML limpio.
-
Personalización y optimización
Resulta fundamental aprender a personalizar Tailwind CSS. El framework está pensado para llegar a la mayoría de las necesidades de los desarrolladores, pero sabemos que los diseños son y deben ser únicos. Tailwind permite llegar a lo que tú quieras gracias a la personalización del framework. Cuando aprendes todo lo que es posible configurar verás que Tailwind es como un generador de tu propio framework personalizado. Pero además, observarás que la enorme cantidad de clases de utilidad es abrumadora y entenderás que sin optimización no se llega a ningún lado. Lo bueno es que Tailwind CSS está desarrollado encima de PostCSS y todas las herramientas para optimizar el código de tus estilos están a tu disposición para dejar el peso de tu framework reducido exactamente a lo que necesitas.
-
6
Cómo personalizar nuestro tema de diseño con Tailwind
En este artículo aprenderás a crear tus propias configuraciones personalizadas en Tailwind CSS, de modo que puedas incorporar todo tipo de clases de utilidad adaptadas a tus necesidades.
-
7
Optimización del CSS con Tailwind
Por fin llegamos a una de las partes más interesantes del framework CSS Tailwind, la optimización del código generado. Este artículo te permitirá ver lo sencillo que es optimizar el CSS del framework para llevar a producción el sitio web.
-
Profundizando en Tailwind CSS
Ahora vamos a dedicarnos a abordar temas importantes del framework, que aparecen cuando quieres profundizar un poco y conseguir dar respuesta a diversas necesidades comunes en el diseño web.
-
8
Crear un Layout con Tailwind CSS
En este artículo te enseñaremos todo lo que necesitas saber para crear el layout de distribución del contenido en un sitio web con Tailwind.
-
9
Organización del código CSS en Tailwind CSS con la directiva @layer
Cómo puedes organizar el código CSS de tus proyectos con Tailwind y cómo nos ayuda la directiva @layer para conseguir encajar bloques de estilos en sus lugares adecuados.
-
10
Aprende a usar la directiva @variant de Tailwind CSS
En este artículo vamos a presentar otra de las directivas que nos ofrece el framework CSS Tailwind. Veremos de manera práctica cómo crear tus variantes con la directiva @variant de Tailwind CSS
-
Prácticas de creación de interfaces de usuario con Tailwind CSS
Ejemplos prácticos de trabajo con Tailwind CSS para la creación de interfaces de usuario típicas de los proyectos de sitios web.
-
11
Listas con Tailwind CSS
Un artículo práctico sobre la construcción de listas con diversos estilos creadas con el framework CSS Tailwind. Aprenderemos a manipular el aspecto de elementos UL y LI.
-
12
Interfaz para un avatar con datos en Tailwind CSS
Seguimos trabajando en el desarrollo de interfaces útiles y habituales con el framework Tailwind CSS, en este caso para hacer una caja dinámica para un avatar con sus datos.
Descargas
-
Descarga del Manual de Tailwind Ahora puedes obtener el Manual de Tailwind CSS en formato electrónico para descargarlo en tu ordenador y dispositivo, leerlo offline de manera cómoda y desde cualquier lugar, incluso sin conexión a Internet. Tienes a tu disposición libros electrónicos en formato PDF y ePub (eBooks, Kindle y otras marcas).
Archivos disponibles: PDF, ePup
Páginas: 58 (Referencia por el archivo PDF)