Logo de Tailwind CSS

¿Qué es?

Tailwind es un framework de CSS que brinda una gran variedad de clases predefinidas para dar estilo a los elementos que integran un documento HTML. Estas clases representan propiedades de CSS de una manera sencilla y fácil de utilizar, además de que permiten crear diseños responsive.

¿Por qué Tailwind?

¿Qué aprenderás en este Codelab?

Creación de proyecto

Crea un proyecto de React y cambia tu ubicación a la carpeta del nuevo proyecto utilizando los comandos:

create-react-app app-name
cd app-name

Ahora ejecuta el comando code . para abrir la aplicación con Visual Studio Code.

Instalación de dependencias

Para poder utilizar Tailwind, es necesario realizar las siguientes instalaciones:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm install @craco/craco

Actualización de scripts

En el archivo package.json de tu proyecto, modifica los scripts start, build y test de modo que contengan los siguientes comandos:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject" //Este permanece igual
  },

Archivos de configuración

Crea un archivo llamado craco.config.js con el fragmento de código mostrado a continuación, donde se especifican los plugins de PostCSS (herramienta que transforma el código CSS utilizando plugins de JavaScript).

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

También es necesario crear un archivo de configuración de Tailwind utilizando el comando:

npx tailwindcss-cli@latest init

Una vez creado, notarás que tiene el nombre de tailwind.config.js. Modifica la opción "purge" de este archivo agregando todas las rutas de los componentes del proyecto para eliminar el código que no se utiliza en producción:

module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], //en esta línea
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Incluir estilos en CSS

Para poder utilizar las clases de Tailwind en el archivo .css se debe colocar @tailwind seguido de los estilos que nos brinda esta herramienta, tal y como se muestra a continuación:

@tailwind base;
@tailwind components;
@tailwind utilities;

¡Y listo!

Ya tienes configurado el entorno para utilizar Tailwind dentro de tu aplicación de React. Continuemos a la siguiente sección✅.

✨ Si quieres integrar Tailwind con otra tecnología, puedes visitar la documentación sobre su instalación.

 
<h1 className='text-gray-700 font-bold text-center text-xl'>Hello World!</h1>

En este caso, al h1 se le está aplicando lo siguiente:

  1. text-gray-700: Color de texto gris con variante 700.
  2. text-center: Alineado al centro.
  3. font-bold: Grosor de la fuente (o weight) negrita.
  4. text-xl: Tamaño de fuente extra grande.

Como puedes observar, las clases de Tailwind son autoexplicativas, por lo que podemos familiarizarnos con ellas muy fácilmente.

✨ Para mejor comprensión, visita la documentación oficial de Tailwind.

Aclaraciones

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

Ahora sí, comencemos✅

Hover Me Button

¿Tienes alguna idea de cómo lograrlo utilizando CSS?

Piénsalo un poco y veamos cómo hacerlo utilizando Tailwind👀, sigue los pasos para que puedas observar cada cambio en tu navegador.

Creación del botón

Añade el elemento button al componente App.

function App() {
  return (
    <div className="App">
        <button>Hover me!</button>
    </div>
  );
}

Posicionamiento

Para que el botón se muestre al centro, haremos uso del posicionamiento con flex en el contenedor principal clase App.

En CSS se vería de la siguiente manera:

div.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Mientras que utilizando el framework Tailwind se logra simplemente colocando las clases (en el mismo orden):

function App() {
  return (
    <div className="App w-screen h-screen flex justify-center items-center">
        <button>Hover me!</button>
    </div>
  );
}

📌 Ten en cuenta que para representar la propiedad width se utiliza w-{valor} y para height h-{valor}.

Estilos

Ahora sigamos con el estilo del botón como tal. Seguramente la solución que pensaste en CSS es algo parecida a la siguiente:

button {
  padding: 0.5rem 1.5rem; /*Recuerda: 0.5rem arriba - abajo y 1.5rem izquierda - derecha*/
  border-radius: 0.375rem;
  background-color: rgb(153, 27, 27);
  color: rgb(255, 255, 255);
  font-weight: 600;
}

button:hover {
  background-color: rgb(220, 38, 38);
}

Teniéndolo en cuenta, coloquemos las clases de Tailwind correspondientes al elemento en el mismo orden:

function App() {
  return (
    <div className="App w-screen h-screen flex justify-center items-center">
        <button className="py-2 px-6 rounded-md bg-red-800 text-white font-semibold hover:bg-red-600">Hover me!</button>
    </div>
  );
}

Como puedes notar, se podría decir que las clases de Tailwind son algún tipo de abreviatura de las propiedades originales de CSS.

📌 Es importante mencionar que los valores colocados en las clases py-2 y px-6 corresponden a medidas predefinidas. Estas pueden estar en rem o en px en su mayoría, a excepción de algunas donde se utilizan unidades porcentuales, vw y vh (width y height).

✨ Para mejor comprensión, visita la sección de padding de la documentación oficial de Tailwind.

Resumen de sección

CSS

Tailwind

width: 100vw;

w-screen

height: 100vh;

h-screen

display: flex;

flex

justify-content: center;

justify-center

align-items: center;

items-center

padding-left: 1.5rem;
padding-right: 1.5rem;

px-{valor}

padding-top: 0.5rem;
padding-bottom: 0.5rem;

py-{valor}

border-radius: 0.375rem;

rounded-md

background-color: #color;

bg-color-variante

color: #color;

text-color-variante

font-weight: 600;

font-semibold

button:hover {
property: value;
}

hover:clase

Responsive cards

✨ Las imágenes fueron extraídas del siguiente sitio web, pero puedes utilizar las que tú quieras.

Contenedor y título

Antes de realizar las tarjetas, colocaremos cierto padding al contenedor principal (de clase App) y crearemos el título de nuestro sitio con su estilo.

function App() {
  return (
    <div className="App p-10">
      <h1 className="mb-12 text-2xl font-bold text-gray-800">Tarjetas responsive con Tailwind</h1>
    </div>
  );
}

📌 Cuando se utiliza solamente p-{valor} para el padding (no px-{valor} o py-{valor} como en el ejemplo anterior), significa que se le aplicará el mismo valor arriba, a la derecha, abajo y a la izquierda.

📌 La clase mb-{valor} representa la propiedad de CSS margin-bottom. Por lo que, siguiendo la misma lógica, se tiene mt-{valor} para margin-top; ml-{valor} para margin-left y mr-{valor} para margin-right.

Estructura de sección y tarjetas

Primero, crearemos la sección que contendrá las tarjetas:

    <div className="App p-10">
      <h1 className="font-bold text-2xl mb-12 text-gray-800">Tarjetas responsive con Tailwind</h1>
      <section>

      </section>
    </div>

Y dentro de la sección, colocaremos el código JSX para una tarjeta:

    <section>
      <article>
        <img src={cats} alt="Descripción de tu imagen" />
        <div>
          <h2>Some title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus mauris vitae lobortis accumsan. Proin ultrices fringilla aliquet. Aenean eget velit quam.</p>
        </div>
        <div>
          <p>Example</p>
          <button>Button</button>
          </div>
      </article>
    </section>

Para visualizar de mejor manera el posicionamiento, puedes agregar las que creas necesarias por el momento.

🔴 Recuerda que debes importar las imágenes en las primeras líneas del código, como se muestra a continuación (las rutas varían dependiendo de la estructura de tu proyecto):

import cats from './assets/img/cats.png';
import garden from './assets/img/garden.png';

Estilo y posicionamiento de sección

Para la sección se utilizará posicionamiento con grid, pero antes es necesario comprender cómo crear variantes de nuestros estilos dependiendo del tamaño del dispositivo.

Tailwind cuenta con breakpoints predefinidos para poder trabajar directamente con ellos y si observas en la tabla, cada uno corresponde a una media query de CSS, esto es lo que permite la adaptabilidad del sitio web.

Responsive

✨ Para más información, visita la sección de diseño responsive de Tailwind.

Sabiendo esto, apliquémoslo a la sección de tarjetas.

Para este ejemplo se tienen las siguientes consideraciones para las tarjetas:

Para esto, el contenedor de las tarjetas debería tener las siguientes clases:

<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

Explicándolo un poco (verifica en la tabla):

📌 La propiedad gap-{valor} se utiliza para dar espaciado entre los elementos del grid.

Si agregaste más de una tarjeta, verifica en la opción inspeccionar del navegador que estas se adaptan a medida se cambia la resolución.

Estilo de tarjetas

Ahora que ya tenemos listo nuestro contenedor, le daremos estilo a las tarjetas. En este caso, como todas son iguales, a excepción de los colores e imágenes, se le puede aplicar solamente a una de ellas y luego copiar el mismo código para las demás, cambiando lo necesario.

Retomemos el diseño y el código utilizado para una tarjeta:

Responsive cards

    <article>
      <img src={cats} alt="Descripción de tu imagen" />
      <div>
        <h2>Some title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus mauris vitae lobortis accumsan. Proin ultrices fringilla aliquet. Aenean eget velit quam.</p>
      </div>
      <div>
        <p>Example</p>
        <button>Button</button>
      </div>
    </article>

⭐ ¿Te animas a intentarlo por tu cuenta?

Puedes lograrlo con los elementos vistos en este Codelab y también con ayuda de la documentación de Tailwind.

Si aceptas el reto, detente en este apartado y revisa la solución cuando esté listo, por si hay elementos adicionales que no hayas considerado utilizar.

¡Mucha suerte!✨

Solución

    <article className="flex flex-col bg-purple-50 shadow-xl">
      <img src={cats} alt="Gatos de colores" />
      <div className="px-4">
        <h2 className="my-4 font-semibold text-lg text-center">Some title</h2>
        <p className="text-center leading-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus mauris vitae lobortis accumsan. Proin ultrices fringilla aliquet. Aenean eget velit quam.</p>
      </div>
      <div className="flex justify-between items-center mt-6 bg-purple-100">
        <p className="pl-4 text-sm text-left">Example</p>
        <button className="py-3 px-2 w-1/3 md:w-1/4 self-center bg-purple-500 font-semibold text-white text-sm hover:bg-purple-600">Button</button>
      </div>
    </article>

📌 flex-col se utiliza para especificar que la dirección del contenedor flex será en forma de columna (propiedad de CSS flex-direction: column;).

📌 shadow-xl se utilizó para que la tarjeta tuviera cierto efecto de sombra. También se pueden utilizar los tamaños sm, md, lg, entre otros.

📌 La clase leading-{valor} se utiliza para dar interlineado en textos.

📌 Como última aclaración, para el botón se utilizó w-1/3 (0.33333% del ancho) para dispositivos menores a 768px y w-1/4 (0.25% del ancho) para los de 768px en adelante. Esta es la forma de colocar unidades porcentuales.

En la documentación de Tailwind se presentan diversas maneras de personalizar colores, espaciado y tamaño, breakpoints e incluso fuentes. Te invito a revisar cada apartado e incluso los demás que se muestran para que tengas una idea de todas las ventajas que Tailwind posee.

Generalmente, cuando se desean cambiar los valores de las clases ya definidas por Tailwind o bien, cuando es necesario crear nuevas clases, se realiza en la opción theme dentro del archivo tailwind.config.js. Observa el siguiente ejemplo:

module.exports = {
  theme: {
    screens: {
      md: '760px',
    },
    colors: {
      black: '#000',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },

    extend: {
      spacing: {
        '15': '3.75rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
      screens: {
        '3xl': '1700px',
      },
    }
  }
}

📌 Tenemos las siguientes claves: screens, colors, fontFamily, spacing y borderRadius. Dentro de ellas se colocan las clases y valores específicos que se desean modificar o incorporar a la aplicación.

📌 También habrás notado que hay algunas claves que se han colocado dentro de extend. ¿Qué significa esto? Se puede resumir en los comentarios del siguiente fragmento de código:

module.exports = {
  theme: {
    //Aquí se cambian los valores de las clases predefinidas por Tailwind.

    extend: {
      //Aquí se crean nuevas clases y se asignan los valores respectivos.
    }
  }
}

Ejercicios breves

1️⃣ Agrega tu color favorito

theme: {
    extend: {
      colors: {
        'fav-color': '#bddcff',
      }
    },
  },

Ahora ya puedes utilizarlo en tu aplicación, por ejemplo con la clase bg-fav-color.

2️⃣ Agrega una variante a un color predefinido

Puedes encontrarlos en este enlace.

theme: {
    extend: {
      indigo: {
          250: '#c2ceff',
        }
    },
  },

Esta podría ser utilizada como bg-indigo-250.

3️⃣ Modifica un breakpoint predefinido

theme: {
    screens: {
        md: '775px', // El predefinido es 768px
    }
},

Confetti

Has finalizado el Codelab sobre Tailwind CSS, esperamos te haya sido de mucha ayuda.

¡Continúa practicando!⭐