DEV Community

Cover image for 🚀 Tailwind `inview:` aplica estilos cuando el componente entra en pantalla
Marcos Montero
Marcos Montero

Posted on

2 1 1 1 1

🚀 Tailwind `inview:` aplica estilos cuando el componente entra en pantalla

✨ Fácil: usa inview: en tus classNames para aplicar estilos solo cuando tu componente aparezca en pantalla!

Añade un InviewSensor en tu componente para usar inview: en sus classNames. Así detectamos dinámicamente si el elemento está en pantalla solo cuando el componente está renderizado

Instalación 🚀

Instala el paquete usando npm:

npm i tailwind-inview
Enter fullscreen mode Exit fullscreen mode

Uso 🛠️

Para comenzar, añade el plugin en el archivo tailwind.config.ts de tu proyecto

import inviewPlugin from 'tailwind-inview';

// ...
plugins: [..., inviewPlugin]
//...

Enter fullscreen mode Exit fullscreen mode

Luego importa el InviewSensor del paquete tailwind-inview y úsalo dentro de tus componentes React. El InviewSensor va dentro de un useEffect para que dentro de este componente puedas añadir tantos inview: como quieras. Así de simple!✨

import React, { useEffect } from "react";
import { InviewSensor } from "tailwind-inview";

const Componente = () => {
  useEffect(inViewSensor, []);

  return (
    <h1 className="inview:animate-bounce repeat-1">Texto Animado al Desplazar</h1>
  );
};

export default Componente;
Enter fullscreen mode Exit fullscreen mode

Demo:
https://tailwind-inview.marcosmontero.dev/

Repo:
https://github.com/Marcos-Montero/tailwind-inview

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more