github twitter codepen youtube

Primeros pasos con Tailwind CSS

css

- 馃摉 5 Min. de lectura

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