12: Conoce Tailwind CSS y úsalo para iniciar con tu portafolio

 

12: Conoce Tailwind CSS y úsalo para iniciar con tu portafolio

Introducción

En este tutorial exploraremos Tailwind CSS, el framework de estilos que forma parte de nuestro stack Bolt. Aprenderemos qué es, cómo funciona y comenzaremos a aplicarlo directamente en nuestro portafolio para crear una interfaz atractiva y profesional.

¿Qué es Tailwind CSS?

Tailwind CSS es un framework de CSS "utility-first" que proporciona clases de bajo nivel para construir diseños personalizados sin tener que escribir CSS tradicional. En lugar de crear clases personalizadas, combinas clases utilitarias directamente en tu HTML.

Características principales:

  • Utility-first: Cada clase hace una sola cosa (ej: bg-blue-500 para fondo azul)

  • Responsive: Clases para diferentes tamaños de pantalla (sm:, md:, lg:)

  • Personalizable: Configuración centralizada en tailwind.config.js

  • Optimizado: Purga automática de CSS no utilizado en producción

  • Modo oscuro: Soporte nativo con la clase dark:

Nota: Actualmente Tailwind está en la versión 3, que es la que utilizaremos durante el curso. La versión 4 vendrá en el futuro, pero los conceptos fundamentales se mantendrán.

Paso 1: Explorar la documentación

La documentación oficial de Tailwind CSS es excelente y tiene un buscador que te permite encontrar rápidamente cualquier clase que necesites.

Clases que vamos a usar frecuentemente:

Distribución con Flexbox

html
<!-- Distribución horizontal -->
<div class="flex flex-row">
  <!-- Elementos en fila -->
</div>

<!-- Distribución vertical -->
<div class="flex flex-col">
  <!-- Elementos en columna -->
</div>

<!-- Espaciado entre elementos -->
<div class="flex justify-between">
  <!-- Espacio entre elementos -->
</div>

<div class="flex justify-center">
  <!-- Elementos centrados -->
</div>

<div class="flex items-center">
  <!-- Alineación vertical centrada -->
</div>

<!-- Wrap de elementos -->
<div class="flex flex-wrap">
  <!-- Elementos envueltos -->
</div>

Espaciado (Margen y Padding)

html
<!-- Margen -->
<div class="m-4">   <!-- margen: 1rem -->
<div class="mx-4">  <!-- margen horizontal -->
<div class="my-4">  <!-- margen vertical -->
<div class="mt-4">  <!-- margen superior -->
<div class="mb-4">  <!-- margen inferior -->
<div class="ml-4">  <!-- margen izquierdo -->
<div class="mr-4">  <!-- margen derecho -->

<!-- Padding (mismo sistema) -->
<div class="p-4">   <!-- padding: 1rem -->
<div class="px-4">  <!-- padding horizontal -->
<div class="py-4">  <!-- padding vertical -->

Valores comunes:

  • 0: 0

  • 1: 0.25rem (4px)

  • 2: 0.5rem (8px)

  • 3: 0.75rem (12px)

  • 4: 1rem (16px)

  • 5: 1.25rem (20px)

  • 6: 1.5rem (24px)

  • 8: 2rem (32px)

  • 10: 2.5rem (40px)

  • 12: 3rem (48px)

  • 16: 4rem (64px)

Colores

html
<!-- Color de texto -->
<p class="text-red-500">Texto rojo</p>
<p class="text-blue-600">Texto azul</p>
<p class="text-gray-700">Texto gris</p>
<p class="text-white">Texto blanco</p>

<!-- Color de fondo -->
<div class="bg-indigo-500">Fondo índigo</div>
<div class="bg-green-200">Fondo verde claro</div>
<div class="bg-gray-900">Fondo gris oscuro</div>

<!-- Color de borde -->
<div class="border border-red-400">Borde rojo</div>

Tipografía

html
<!-- Tamaños de texto -->
<p class="text-xs">Texto extra pequeño</p>
<p class="text-sm">Texto pequeño</p>
<p class="text-base">Texto base</p>
<p class="text-lg">Texto grande</p>
<p class="text-xl">Texto extra grande</p>
<p class="text-2xl">Texto 2x grande</p>
<p class="text-3xl">Texto 3x grande</p>
<p class="text-4xl">Texto 4x grande</p>

<!-- Pesos de fuente -->
<p class="font-light">Fuente ligera</p>
<p class="font-normal">Fuente normal</p>
<p class="font-medium">Fuente media</p>
<p class="font-bold">Fuente negrita</p>

<!-- Transformaciones -->
<p class="uppercase">TEXTO MAYÚSCULAS</p>
<p class="lowercase">texto minúsculas</p>
<p class="capitalize">texto con mayúscula inicial</p>

Tamaños y dimensiones

html
<!-- Altura -->
<div class="h-screen">     <!-- 100% de la pantalla -->
<div class="h-64">         <!-- 16rem -->
<div class="h-full">       <!-- 100% del contenedor -->

<!-- Ancho -->
<div class="w-full">       <!-- 100% del contenedor -->
<div class="w-1/2">        <!-- 50% -->
<div class="w-2/3">        <!-- 66.66% -->
<div class="max-w-7xl">    <!-- Ancho máximo -->

Paso 2: Configurar nuestro proyecto

Asegúrate de que los comandos de compilación estén ejecutándose:

Terminal 1: Servidor de Laravel

bash
php artisan serve

Terminal 2: Compilador de assets (modo watch)

bash
npm run watch

Importante: Ambos comandos deben ejecutarse en terminales separadas para que los cambios se vean reflejados automáticamente.

Paso 3: Construir la página de bienvenida

Vamos a crear una página de inicio para nuestro portafolio usando Tailwind CSS. Abre resources/js/Pages/Welcome.vue y personalízala:

vue
<template>
    <div>
        <!-- Header -->
        <header class="bg-gray-800 h-screen px-72 py-16 flex flex-wrap content-between border-b border-gray-600 pb-36">
            <div class="w-full">
                <h1 class="border-b-2 border-gray-400 font-bold text-2xl uppercase text-gray-300 pb-3">
                    Hola, soy Juan
                </h1>
                <p class="text-xl text-gray-400 mt-4">
                    Soy un Software Engineer y me encantaría trabajar contigo
                </p>
            </div>
        </header>

        <!-- Sección de Skills -->
        <section class="bg-gray-200 text-gray-800 h-screen px-72 py-16">
            <h2 class="text-4xl font-bold mt-8">
                Skills
            </h2>
            <!-- Aquí irán las habilidades -->
        </section>

        <!-- Sección de Proyectos -->
        <section class="bg-gray-600 text-gray-100 h-screen px-72 py-16">
            <h2 class="text-4xl font-bold mt-8">
                Proyectos
            </h2>
            <!-- Aquí irán los proyectos -->
        </section>

        <!-- Footer -->
        <footer class="bg-gray-800 text-gray-300 text-xl px-72 py-10 flex justify-between">
            <p>
                &copy; 2024 Juan. Todos los derechos reservados.
            </p>
            <ul class="flex gap-6 justify-center items-center">
                <li>
                    <a href="#" class="hover:text-white">GitHub</a>
                </li>
                <li>
                    <a href="#" class="hover:text-white">Twitter</a>
                </li>
                <li>
                    <a href="#" class="hover:text-white">Stack Overflow</a>
                </li>
            </ul>
        </footer>
    </div>
</template>

Paso 4: Explicación de las clases utilizadas

Header

html
<header class="bg-gray-800 h-screen px-72 py-16 flex flex-wrap content-between border-b border-gray-600 pb-36">
ClasePropósito
bg-gray-800Fondo gris oscuro
h-screenAltura del 100% de la pantalla
px-72Padding horizontal de 18rem
py-16Padding vertical de 4rem
flexActivar Flexbox
flex-wrapPermitir envoltura de elementos
content-betweenDistribuir contenido entre arriba y abajo
border-bBorde inferior
border-gray-600Borde gris
pb-36Padding inferior de 9rem

Título

html
<h1 class="border-b-2 border-gray-400 font-bold text-2xl uppercase text-gray-300 pb-3">
ClasePropósito
border-b-2Borde inferior de 2px
border-gray-400Color del borde
font-boldTexto en negrita
text-2xlTamaño de texto 1.5rem
uppercaseTexto en mayúsculas
text-gray-300Color gris claro
pb-3Padding inferior de 0.75rem

Secciones

html
<section class="bg-gray-200 text-gray-800 h-screen px-72 py-16">
ClasePropósito
bg-gray-200Fondo gris claro
text-gray-800Texto gris oscuro (contraste)
h-screenAltura de pantalla completa

Footer

html
<footer class="bg-gray-800 text-gray-300 text-xl px-72 py-10 flex justify-between">
ClasePropósito
flexFlexbox
justify-betweenEspaciado entre elementos
text-xlTexto grande
px-72Padding horizontal consistente

Paso 5: Agregar habilidades desde la base de datos

Vamos a traer las habilidades desde la base de datos. Primero, actualiza el controlador:

app/Http/Controllers/SkillController.php:

php
<?php

namespace App\Http\Controllers;

use App\Models\Skill;
use Illuminate\Http\Request;
use Inertia\Inertia;

class SkillController extends Controller
{
    public function index()
    {
        $skills = Skill::orderBy('order')->get();
        
        return Inertia::render('Skills/Index', [
            'skills' => $skills
        ]);
    }
}

Luego, en routes/web.php, agrega la ruta y modifica la página de bienvenida para incluir los datos.

Paso 6: Crear componentes reutilizables

Crea componentes Vue para los elementos que se repiten:

Componente Card (resources/js/Components/Card.vue)

vue
<template>
    <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
        <slot />
    </div>
</template>

Componente Button (resources/js/Components/Button.vue)

vue
<template>
    <button 
        class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-200 font-medium"
        @click="$emit('click')"
    >
        <slot />
    </button>
</template>

<script setup>
defineEmits(['click']);
</script>

Paso 7: Personalizar el archivo de configuración

El archivo tailwind.config.js permite personalizar colores, tamaños y más:

javascript
export default {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.vue',
        './resources/**/*.js',
    ],
    theme: {
        extend: {
            colors: {
                primary: '#4F46E5',
                secondary: '#7C3AED',
                accent: '#EC4899',
            },
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
        },
    },
    plugins: [],
}

Paso 8: Agregar estilos personalizados (opcional)

Si necesitas estilos personalizados, puedes agregarlos en resources/css/app.css:

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

/* Estilos personalizados */
@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors;
    }
    
    .card {
        @apply bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow;
    }
}

Paso 9: Hacer la página responsiva

Tailwind facilita el diseño responsivo con prefijos:

html
<!-- Móvil: columna, Tablet: fila, Desktop: fila con wrap -->
<div class="flex flex-col md:flex-row lg:flex-wrap">
    
<!-- Padding responsive -->
<div class="px-4 sm:px-8 md:px-16 lg:px-24 xl:px-32">
    
<!-- Tamaño de texto responsive -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">

Solución de problemas comunes

Los estilos no se actualizan

bash
# Detén el proceso watch y vuelve a ejecutarlo
npm run watch

Error de compilación

bash
# Limpia la caché y reinstala
rm -rf node_modules package-lock.json
npm install
npm run dev

Las clases no están disponibles

Asegúrate de que el archivo content en tailwind.config.js incluya todas las rutas donde usas clases:

javascript
content: [
    './resources/**/*.vue',
    './resources/**/*.js',
    './resources/**/*.blade.php',
],

Resumen

✅ Aprendimos qué es Tailwind CSS y sus conceptos fundamentales
✅ Exploramos las clases más comunes (Flexbox, espaciado, colores, tipografía)
✅ Configuramos el entorno de compilación
✅ Construimos una página de bienvenida con Tailwind
✅ Creamos componentes reutilizables
✅ Agregamos estilos personalizados
✅ Hicimos el diseño responsivo

¡Excelente trabajo! Ahora tienes las bases para estilizar todo tu portafolio con Tailwind CSS. En las próximas clases exploraremos más funcionalidades y comenzaremos a integrar datos reales desde la base de datos.

Recursos adicionales

¿Tienes preguntas sobre el uso de Tailwind? Recuerda que la documentación oficial y el buscador de clases son tus mejores aliados para encontrar la clase que necesitas

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tareas con Laravel + Inertia + Jetstream

  Tareas con Laravel + Inertia + Jetstream 📋 Descripción del Proyecto Aplicación ultra simple de tareas: ✅ Agregar una tarea ✅ Ver una tarea guardada ✅ Almacenar en arreglo (sesión) ❌ Sin listas largas, sin editar, sin eliminar 🚀 1. INSTALACIÓN (PASO A PASO) 1.1 Crear proyecto bash # Crear proyecto Laravel 10 (compatible con PHP 8.0+) composer create-project laravel/laravel:^10.0 tareas-app composer create-project laravel/laravel tareas-app cd tareas-app 1.2 Instalar Jetstream con Inertia bash # Instalar Jetstream composer require laravel/jetstream # Instalar Jetstream con Inertia (sin equipos) php artisan jetstream:install inertia 1.3 Instalar dependencias frontend bash # Instalar paquetes NPM npm install # Compilar assets npm run build 1.4 Configurar entorno bash # Crear archivo .env cp .env.example .env copy .env.example .env # Generar clave php artisan key:generate # Configurar base de datos SQLite touch database/database.sqlite type nul > databas...
Leer más

HACER CAMBIOS-AL EJEMPLO POR DEFECTO

  Una vez que has configurado tu proyecto con Laravel, Inertia y el Starter Kit elegido, el siguiente paso es entender cómo modificar la página de bienvenida por defecto y empezar a construir tu aplicación. En el ecosistema de Laravel con Inertia, la página de bienvenida ya no es una plantilla Blade tradicional, sino un componente de Vue o React que funciona como el punto de entrada de tu interfaz. Aquí tienes un tutorial paso a paso para hacer tus primeros cambios. 🚀 Entendiendo la Estructura del Proyecto Con el Starter Kit de Laravel (que incluye Vue/React e Inertia), la página de bienvenida que ves al acceder a la raíz de tu proyecto ya no está en resources/views/welcome.blade.php . En su lugar, es un componente de frontend gestionado por Inertia . El punto de entrada del frontend : El archivo resources/js/app.js (o app.ts si usas TypeScript) es donde se configura y arranca la aplicación Inertia . El componente principal : La página de inicio se encuentra en resources/js/Page...
Leer más

Laravel + Inertia - ejemplo

  Perfecto! Vamos a construir un ejemplo mínimo y funcional con Laravel + Inertia + Vue 3 . El ejemplo tendrá: Un input para escribir una tarea. Un botón para guardar esa tarea. La tarea se almacenará en sesión (para no complicar con base de datos) y se mostrará debajo. 1. Estructura de archivos que vamos a tocar text routes/web.php → ruta principal app/Http/Controllers/TareaController.php → controlador resources/js/Pages/Tarea.vue → componente Vue (la vista) 2. Ruta y Controlador routes/web.php php <?php use App \ Http \ Controllers \ TareaController ; use Illuminate \ Support \ Facades \ Route ; Route :: get ( '/tarea' , [ TareaController :: class , 'index' ] ) -> name ( 'tarea.index' ) ; Route :: post ( '/tarea' , [ TareaController :: class , 'store' ] ) -> name ( 'tarea.store' ) ; app/Http/Controllers/TareaController.php php <?php namespace App \ Http \ Controllers ; use Illuminate \ Http \ ...
Leer más