DEV Community

loading...

Begining Guide to Use Tailwind CSS

Ismael López
Frontend developer | Passionate About Web Tecnologies, Android Development and Education
・3 min read

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
Enter fullscreen mode Exit fullscreen mode

Creamos los archivos de configuración de tailwind css.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Creamos un archivo para las configuraciones de post css.

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode

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

code .
Enter fullscreen mode Exit fullscreen mode

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')
  ]
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

npm run build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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í hau un atributo llamado spacing.
Como dato 1rem equivale a 16px;

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',
    },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)