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í 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',
},
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">
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
Top comments (0)