• Home
  • About me
  • Blog

Un vistazo r谩pido a Tailwindcss

25 junio 2018

Tailwindcss es un framework para el desarrollo de interfaces personalizadas de forma r谩pida, a diferencia de bootstrap, foundation, semantic-ui, bulmacss y similares que te proveen abstracciones habituales tipo botones, cards, menus, formularios.

En su lugar tailwind te proporciona clases css de bajo nivel muy adaptable a componentes, sin la necesidad de que tus sitios se vean igual.

Component friendly

Aunque usar/combinar las clases parece una excelente idea, tambi茅n tenemos la opci贸n de irnos por componentes en ciertos casos es la mejor decisi贸n, podemos aprovechar herramientas para extraer clases de componentes en lugar de repetirlos.

Personalizable

Tailwind est谩 escrito en postCss y configurado con Javascript, en dichas configuraciones incluimos colores, tama帽os de bordes, pesos de fuentes, utilidades de espaciado, breakpoints, sombras y mucho m谩s.

Instalaci贸n

Tenemos dos opciones:

Desde la CDN: esta opci贸n tiene sus limitaciones en cuanto a la personalizaci贸n, pero es m谩s que suficiente cuando necesitamos hacer un prototipo r谩pido de una aplicaci贸n. Como se encuentra en la documentaci贸n puedes agregar _todas_ las utilidades de Tailwind o hacerlo por separado.

<!-- Todo -->
<link
  href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"
  rel="stylesheet"
/>

<!-- Por separado -->

<link
  href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css"
  rel="stylesheet"
/>

<link
  href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css"
  rel="stylesheet"
/>

Usando npm/yarn: Al d铆a de hoy tailwind se encuentra en su version v0.6.1 en npm.

#con npm
npm install tailwindcss --save-dev

#con yarn
yarn add tailwindcss --dev

En la documentaci贸n oficial puedes encontrar la configuraci贸n para gulp, grunt, webpack, Laravel Mix y Brunch.

Usa tailwind en tu css

Luego de terminar la configuraciones de tus herramientas es momento de utilizar tailwind con las siguientes directivas.

Preflight

`@tailwind preflight;` incluye los estilos de normalize.css y adicionales para tener una base css similar en todos los navegadores.

Components

`@tailwind components;` Esto inyecta cualquier clase de componente personalizado y los plugins.

Utilities

`@tailwind utilities;` Esto inyecta todas las clases utilitarias de tailwindcss basadas en el archivo de configuraci贸n tailwind.js.

Archivo de configuraci贸n

Se puede decir que la mayor parte de la magia est谩 en este archivo, es la base de todas las clases utilitarias de tailwind aqu铆 definimos variables tales como colores, tama帽os y peso de fuentes, breakpoints, tipograf铆as y m谩s, aqu铆 podemos definir nuestra gu铆a de estilo ( yo tengo la gu铆a de estilos de cierto sitio web de noticias)

En conclusi贸n, tailwind es un poderos铆sima herramienta para la creaci贸n de interfaces personalizadas/sitios web/componentes.

Estoy escribiendo otro post, d贸nde les voy a compartir mi configuraci贸n para React/Vue y solo html, y unos repositorios donde hago 鈥渃lones鈥 de sitios/aplicaciones web.