github twitter codepen youtube
 

Primeros pasos con Tailwind CSS

| 📖 5 Min. | css

Instalación y configuración del proyecto

Iniciamos un nuevo proyecto npm e instalamos las líbrerias que vamos a utilizar.

mkdir tailwind-css-project
cd tailwind-css-project
npm init -y
npm i tailwindcss autoprefixer postcss-cli

Creamos los archivos de configuración de tailwind css.

npx tailwindcss init

Creamos un archivo para las configuraciones de post css.

touch postcss.config.js

Abrimos el proyecto con Visual Studio Code (VS Code).

code .

Puedes utilizar la siguiente extensión para tu editor de código que te ayudara al escribir las clases de tailwind css.

Extensión recomendada para VS Code. Tailwind CSS IntelliSense

Configuramos en archivo postcss.config.js

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

Vamos a crear el archivo base de tailwind que hará que funcione agregue los componentes que necesita para funcionar. A este archivo lo llamaremos css/tailwind-base.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Ahora creamos un nuestro archivo index.html en una carpeta que nombraremos public, entonces la ruta serías public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Ahora vamos a crear el archivo de salida style.css que importamos en el index.html, para ello creamos un comando en la sección de scripts del package.json

"build": "postcss css/tailwind-base.css -o public/css/style.css"

Para finalizar en la terminal ejecutamos el siguiente comando que construirá el archivo de styles.css.

npm run build

Aquí me surgio un problema y es que no me permitía la ejecución del script y tuve que ejecutar el siguiente comando en mi configuración de node.

npm config set ignore-scripts false

Si alguien tiene el mismo problema espero le sirva. Continuemos.

Principios de Tailwind

  • Responsive Design
  • Mobile First
  • Utility First

Colores

Los elementos a los que se les puede cambiar el color son:

  • Fondo
  • Texto
  • Bordes
  • Placeholder

Actualmente tenemos un archivo de configuración vacío pero ahora queremos agregar la configuración que tailwind tiene por defecto para ello vamos a ejecutar el siguiente comando que nos creará dicho archivo.

npx tailwindcss init tailwind.config.full.js --full

Ahora aprendamos a usarlo. Vamos al archivo index.html y en la etiqueta h1 le agregamos las siguientes clases.

  <h1 class="bg-yellow-500 text-white">Hello world</h1>
  <input class="border-2 border-blue-500 placeholder-green-500" type="text" placeholder="Ingresa texto">

Como pueder ver todas estás clases existen gracias a que agregamos la configuración anterior de tailwind.

Dimensiones y espacios

Tailwind tiene un sistema configurable de espacios y tamaños, regresando a nuestro archivo de configuración tailwind.config.js aquí hay un atributo llamado spacing. Como dato 1rem equivale a 16px ya que por defecto los navegadores tienen un font-size de 16px, pero si difines como base de tu fuente a 14px entonces esos será el equivalente a 1rem.

spacing: {
      px: '1px',
      '0': '0',
      '1': '0.25rem',
      '2': '0.5rem',
      '3': '0.75rem',
      '4': '1rem',
      '5': '1.25rem',
      '6': '1.5rem',
      '8': '2rem',
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem',
      '20': '5rem',
      '24': '6rem',
      '32': '8rem',
      '40': '10rem',
      '48': '12rem',
      '56': '14rem',
      '64': '16rem',
    },

Estas propiedades pueden controlar las dimensiones o espacios.

  • Height
  • Width
  • Margin
  • Padding

Veamos como modificar estás propiedades.

<h1 class=" h-16 w-32 bg-yellow-500 text-white">Hello world</h1>

Tailwind también nos permite usar porcentajes y estos los maneja en fracciones.

<h1 class=" h-16 w-1/2 bg-yellow-500 text-white">Hello world</h1>

Ahora veamos como modificariamos las propiedades de margin y padding.

  <h1 class=" h-32 w-1/5  pt-8 pl-4 ml-8 mt-16 mb-16 bg-yellow-500 text-white">Hello world</h1>

También podemos cambiar las propiedades respecto al eje x, y. Esto nos permite agregar en ambos lados la misma cantidad de unidades.

<h1 class=" h-32 w-1/5 my-8 bg-yellow-500 text-white">Hello world</h1>

<!-- mx-auto nos permite centrarlo-->
<h1 class=" h-32 w-1/5 my-8 mx-auto bg-yellow-500 text-white">Hello world</h1>

Para el padding podemos aplicarlo en nuestro input de la siguiente manera.

<input class="py-1 px-4 border-2 border-blue-500 placeholder-green-500" type="text" placeholder="Ingresa texto">

Hemos llegado al final de este post, aprendiste como implementar tailwind en tus proyectos, dejame en los comentarios que piensas hacer; te gusto no te gusto tailwind, cualquier duda será un gusto responderla.

Recursos

Aqui te dejo los enlaces de la documentación oficial para que la repases más a fondo y otros recursos donde hay mucha más información donde puedas seguir aprendiendo y buscando inspiración.

https://tailwindcss.com/docs https://github.com/aniftyco/awesome-tailwindcss https://refactoringui.com/book