Tutorial básico de Tailwind CSS con Vite.js

12 minutos

¿Estás buscando una forma de crear diseños web impresionantes sin tener que escribir mucho código CSS? Un framework de CSS como Tailwind puede ser justo lo que necesitas.

Esta biblioteca de clases utilitarias te permite diseñar sitios web de manera rápida y eficiente, sin sacrificar la personalización que necesitas para hacer que tus proyectos se destaquen.

En este tutorial, aprenderás los conceptos básicos creando un pequeño proyecto de Vite.js integrando Tailwind CSS.

✔️ Si deseas ver el código fuente del proyecto lo encuentras en este repositorio.

🛠️ Instalando Tailwind

Antes que todo, asegúrate de tener Node.js instalado en tu equipo, esto para poder ejecutar comandos de npm.

Debes crear un nuevo proyecto de Vite.js:

Terminal
npm create vite@latest my-tailwind-project -- --template vanilla
Copiar

Durante la instalación, es posible que te pregunte si deseas agregar el paquete "create-vite", si es así, confirma tu elección escribiendo "y".

Después de crear el proyecto, navega hasta la carpeta y ejecuta el siguiente comando para instalar Tailwind:

Terminal
npm install -D tailwindcss postcss autoprefixer
Copiar

🔩 Configurando Tailwind

Para configurar Tailwind necesitas generar un archivo de configuración predeterminada, lo haces ejecutando el siguiente comando:

Terminal
npx tailwindcss init -p
Copiar

Se generará un archivo llamado tailwind.config.js en la raíz del proyecto. Este archivo permitirá agregar clases personalizadas a Tailwind de manera sencilla.

✒️ Integrando Tailwind con PostCSS

Además de tailwind.config.js, se generará automáticamente un archivo nombrado postcss.config.js que necesitas para utilizar las clases de Tailwind.

Este archivo contendrá el siguiente contenido:

js
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
Copiar

📘 Configurando tus rutas de plantilla

Para que Tailwind pueda aplicar estilos a tus archivos, debes especificar las rutas en el archivo tailwind.config.js. Para hacerlo, agrega las rutas correspondientes en el parámetro content de la siguiente manera:

js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./**/*.html'],
    theme: {
        extend: {},
    },
    plugins: [],
};
Copiar

En este ejemplo, hemos incluido todas las rutas de los archivos con extensión .html. Asegúrate de ajustar las rutas a tu propia estructura de carpetas y archivos.

📋 Agregando las directivas de Tailwind a tu CSS

Vas al archivo style.css (CSS principal), aquí vas incluir directivas de procesador de CSS que se utilizan para incluir las utilidades predefinidas de Tailwind en tu hoja de estilo:

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

/* Estilos predefinidas por el proyecto de Vite.js */
Copiar

Este archivo debe enlazarse en tu archivo HTML principal. En el archivo index.html importas style.css dentro de la etiqueta "head" de esta manera:

html
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Vite App</title>
</head>
Copiar

🗑️ Eliminando contenido innecesario

En este proyecto, hay algunos archivos predefinidos que vienen con la plantilla de Vite.js que no son necesarios, vas a hacer una limpieza.

En el archivo style.css, eliminarás todas las clases predefinidas para poder crear tus propias clases personalizadas. Para empezar, el archivo debería contener solo las siguientes líneas:

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

/* Aquí podrás agregar tus estilos personalizados */
Copiar

Además, eliminarás completamente el archivo main.js y el enlace de "script" en tu index.html, ya que puede interferir con la estructura básica del proyecto:

html
<body>
    <!-- ...Demás etiquetas -->
    <!-- Línea que debe ser elimindada -->
    <script type="module" src="/main.js"></script>
</body>
Copiar

Por último borrarás javascript.svg, vite.svg y counter.js, que corresponden a archivos no utilizados.

⚠️ Los archivos comentados anteriormente vienen predefinidos por la plantilla de Vite.js, en este caso se eliminan para mantener limpio la estructura del proyecto.

🎨 Usando clases de Tailwind

Ahora que has configurado e integrado todo correctamente, puedes empezar a usar las clases de Tailwind en tu HTML.

Por ejemplo, puedes crear una sección con un título y dos párrafos utilizando las clases de Tailwind de la siguiente manera:

html
<body>
    <section class="bg-gray-200">
        <h1 class="text-3xl font-bold text-center">Bienvenido a mi sitio web</h1>
        <p class="my-4">Este es un tutorial básico de Tailwind con Vite.js.</p>
        <p class="my-4">
            Tailwind es una biblioteca de clases CSS utilitarias diseñada para acelerar el proceso de diseño y desarrollo de sitios web.
        </p>
    </section>
</body>
Copiar

En este ejemplo, hemos utilizado las clases:

bg-gray-200: para establecer el color de fondo de la sección.
text-3xl y font-bold: para el título.
my-4 para darles a los párrafos un poco de margen superior e inferior.

🚀 Un ejemplo de otro nivel

Completarás este tutorial creando un proyecto un poco más elaborado. Será una carta con efecto de "hover" magnífico para usar en diversos proyectos.

Empiezas creando una estructura base para el proyecto, donde se escribe una "section" para separarlo, si hubiese, de los demás elementos. Dentro de este hay un "article", el cual posee dos imágenes (el fondo y el personaje):

html
<body>
    <section>
        <!-- Card -->
        <article>
            <img src="https://pbs.twimg.com/media/FoEfgVBaIAIMJxB?format=jpg&name=large" alt="background" />
            <img
                src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5653372f-c704-4218-b683-1c0147c9040e/dfplkku-675baec4-d51b-47f8-803a-bc0a8677fcbc.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU2NTMzNzJmLWM3MDQtNDIxOC1iNjgzLTFjMDE0N2M5MDQwZVwvZGZwbGtrdS02NzViYWVjNC1kNTFiLTQ3ZjgtODAzYS1iYzBhODY3N2ZjYmMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.7GkwDly77IAtej_snbjwaUlfMilV5CUSd-keSGylIY4"
                alt="bowser"
            />
        </article>
    </section>
</body>
Copiar

Ahora pondrás elementos que te servirán para estilizar y estructurarlo de mejor manera, con un título y demás elementos que creas necesarios:

html
<body>
    <section>
        <h1>Hover Effect</h1>
        <p>Mini proyecto de Tailwind con Vite.js.</p>
        <!-- Card -->
        <article>
            <img src="https://pbs.twimg.com/media/FoEfgVBaIAIMJxB?format=jpg&name=large" alt="background" />
            <img
                src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5653372f-c704-4218-b683-1c0147c9040e/dfplkku-675baec4-d51b-47f8-803a-bc0a8677fcbc.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU2NTMzNzJmLWM3MDQtNDIxOC1iNjgzLTFjMDE0N2M5MDQwZVwvZGZwbGtrdS02NzViYWVjNC1kNTFiLTQ3ZjgtODAzYS1iYzBhODY3N2ZjYmMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.7GkwDly77IAtej_snbjwaUlfMilV5CUSd-keSGylIY4"
                alt="bowser"
            />
        </article>
    </section>
    <footer>🎶Peaches, Peaches, Peaches, Peaches, Peaches🎶</footer>
</body>
Copiar

Ahora viene la magia. Vas a aplicar clases de Tailwind para todos las etiquetas y que se aplique el efecto que se busca al poner el puntero del mouse sobre la carta.

Primeramente, los elementos que no corresponde a la carta se buscan que se centren y tengan tamaños específicos:

html
<body class="text-white">
    <section class="bg-black h-screen flex flex-col justify-center items-center">
        <h1 class="text-2xl font-bold text-center">Hover Effect</h1>
        <p class="mt-2 mb-6">Mini proyecto de Tailwind con Vite.js.</p>
        <!-- Card -->
        <article>
            <img src="https://pbs.twimg.com/media/FoEfgVBaIAIMJxB?format=jpg&name=large" alt="background" />
            <img
                src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5653372f-c704-4218-b683-1c0147c9040e/dfplkku-675baec4-d51b-47f8-803a-bc0a8677fcbc.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU2NTMzNzJmLWM3MDQtNDIxOC1iNjgzLTFjMDE0N2M5MDQwZVwvZGZwbGtrdS02NzViYWVjNC1kNTFiLTQ3ZjgtODAzYS1iYzBhODY3N2ZjYmMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.7GkwDly77IAtej_snbjwaUlfMilV5CUSd-keSGylIY4"
                alt="bowser"
            />
        </article>
    </section>
    <footer class="fixed bottom-0 w-full text-center mb-6 text-white/60 text-xs">🎶Peaches, Peaches, Peaches, Peaches, Peaches🎶</footer>
</body>
Copiar

Destacando algunas clases se puede explicar:

text-white: letra de color blanco.
h-screen: la altura sea del tamaño de la pantalla.
flex y flex-col: convierte en contenedor para controlar posicionamiento de los elementos internos, los ordena en columnas.
justify-center y items-center: centrar los elementos internos horizontal y verticalmente.
mt-2 y mb-6: crea márgenes superior y inferior respectivamante, para distanciar elementos.

🤘 Efecto Hover

Continuando con los ejemplos anteriores, llegas a la parte más interesante del proyecto. El efecto que se busca es que al poner el puntero del mouse sobre la carta tenga una animación dinámica y profesional.

Continuamos el ejemplo añadiendo las siguientes clases:

html
<body class="text-white">
    <section class="bg-black h-screen flex flex-col justify-center items-center">
        <h1 class="text-2xl font-bold text-center">Hover Effect</h1>
        <p class="mt-2 mb-6">Mini proyecto de Tailwind con Vite.js.</p>
        <!-- Card -->
        <article
            class="relative w-[200px] transition-all duration-300 article-hover before:content-[''] before:absolute before:bottom-0 before:h-full before:w-full before:bg-gradient-to-b before:from-transparent/10 before:via-black/60 before:to-black/95 before:opacity-0 before:transition-all before:duration-300 before:hover:opacity-100 group"
        >
            <img class="shadow-2xl rounded-md" src="https://pbs.twimg.com/media/FoEfgVBaIAIMJxB?format=jpg&name=large" alt="background" />
            <img
                class="absolute w-[150px] bottom-0 right-0 left-0 m-auto translate-y-[25%] transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-y-[10%]"
                src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5653372f-c704-4218-b683-1c0147c9040e/dfplkku-675baec4-d51b-47f8-803a-bc0a8677fcbc.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU2NTMzNzJmLWM3MDQtNDIxOC1iNjgzLTFjMDE0N2M5MDQwZVwvZGZwbGtrdS02NzViYWVjNC1kNTFiLTQ3ZjgtODAzYS1iYzBhODY3N2ZjYmMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.7GkwDly77IAtej_snbjwaUlfMilV5CUSd-keSGylIY4"
                alt="bowser"
            />
        </article>
    </section>
    <footer class="fixed bottom-0 w-full text-center mb-6 text-white/60 text-xs">🎶Peaches, Peaches, Peaches, Peaches, Peaches🎶</footer>
</body>
Copiar

Aquí observas que se aplican bastantes clases. Vamos a explicar el porqué las vas a usar.

La carta va a ser tu "article", la cual va a tener la primera "img" como imagen de fondo, por eso simplemente se agrega shadow-2xl rounded-md, osea se redondea un poco y se le agrega una sombra.

La segunda imagen es un poco especial. Esta se pondrá por encima de toda la carta, primero estará con invisible, por eso usas opacity-0. Luego al hacer hover en el padre agregas la clase group-hover:opacity-100 para que se muestre. De esta forma se llama a la pseudo clase ":hover".

Es importante destacar las clases absolute w-[150px] bottom-0 right-0 left-0 m-auto, estas te hacen que la carta se pueda poner sobre el "article", a la vez se posiciona donde se desea. El article por su lado debe tener obligatoriamente la clase relative para que la imagen se base en la posición de la carta y no del "body".

Las clases de transition-all duration-300 son simplemente para indicarle a los elementos tendrán una transición.

Cuando utilizas el pseudo elemento "::before" en el "article", lo haces para crear un sombreado a la hora de hacer el hover sobre la carta, por eso existen varias clases que empiezan con before:.

Se recalca que algunas funcionalidades de CSS no vienen integradas en clases de Tailwind directamente, por eso en este proyecto se agregó la clase article-hover con código de CSS en el archivo style.css.

⚠️ Si tienes alguna duda o quieres investigar más lo mejor es consultar la documentación de Tailwind.

💻 Ejecutando el proyecto

Ahora solo necesitas ejecutar un comando para ver el estado actual de tu proyecto y seguir desarrollando:

Terminal
npm run dev
Copiar

✅ Ventajas de Tailwind

Tailwind es una herramienta poderosa que puede acelerar el proceso de diseño y desarrollo de sitios web y, con un poco de práctica, puedes aprender a utilizarlo de manera efectiva para crear diseños personalizados de alta calidad.

Algunas ventajas de las que te puedes aprovechar son:

Productividad y eficiencia.
Flexibilidad y personalización
Mantenibilidad
Comunidad activa

Repositorio

Descarga aquí el código

Bootcamp Desarrollo Web FullStack

Ver Curso

En esta página

🛠️ Instalando Tailwind 🔩 Configurando Tailwind 🗑️ Eliminando contenido innecesario 🎨 Usando clases de Tailwind 💻 Ejecutando el proyecto ✅ Ventajas de Tailwind

Actualizado 28 mar 2023