// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
gradient: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
},
animation: {
'gradient': 'gradient 4s ease infinite',
},
},
},
};
// Utilizare în JSX / HTML:
// <button className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-[length:200%_200%] animate-gradient px-6 py-2.5 rounded-xl text-white font-medium shadow-lg">
// Apasă aici
// </button>De ce instalează lumea o librărie întreagă de animații doar ca să miște trei culori pe un buton de CTA? Am văzut schema asta săptămâna trecută într-un audit de frontend pentru o aplicație B2B cu vreo 15k utilizatori activi: aveau Framer Motion în bundle exclusiv pentru un chenar animat și două fade-in-uri obosite.
Am scos pachetul, am redus bundle-ul inițial de JS cu vreo 34kB gzipped și am rezolvat efectul în Tailwind cu CSS curat. Fără hydration mismatch, fără flickering la încărcare.
Mecanismul: background-size și background-position
Trucul e vechi de când lumea, dar multă lume a uitat de el. Nu poți anima direct proprietatea background-image între două stări diferite în CSS clasic fără hack-uri urâte sau @property (care încă are mici chichițe pe browsere vechi).
În schimb, poți face altceva extrem de ieftin:
- Faci gradientul de două sau trei ori mai lat decât containerul (
background-size: 200% 200%sau chiar300%). - Animezi
background-positionde la0% 50%la100% 50%și înapoi.
Ochiul percepe asta ca pe un fluid care curge continuu dintr-o culoare în alta, deși în spate nu faci decât să plimbi o textură dintr-o parte în alta.
Cum legăm totul în Tailwind
Dacă ești pe Tailwind v3, cel mai curat e să extinzi tema în tailwind.config.js. Adaugi o cheie pentru keyframes și una pentru animația propriu-zisă. Dacă ești pe Tailwind v4, poți trânti direct @keyframes în fișierul principal de CSS și o clasă custom folosind variabilele native.
După ce ai definit animația în config, o aplici pe orice element folosind clasele standard: dai un gradient cu bg-gradient-to-r, pui mărimea cu bg-[length:200%_200%] și chemi clasa ta animate-gradient.
Merge uns pe butoane, pe texte cu bg-clip-text text-transparent, sau pe chenare subtile tip card de pricing premium.
Trade-off-ul sincer: CPU vs GPU
Trebuie să fim cinstiți tehnic până la capăt. background-position nu rulează pe compositorul plăcii video așa cum fac transform sau opacity. Asta înseamnă că browserul declanșează un mic ciclu de repaint la fiecare frame.
Pe un buton de 180x45 pixeli sau pe un badge mic, costul de repaint e insesizabil: vreo 0.2ms pe frame, stă lejer în 60 sau 120 FPS chiar și pe un telefon Android ieftin de acum 4 ani.
Dar dacă te mănâncă pielea să pui clasa asta pe tot <body>-ul sau pe un container hero de 1920x1080px, s-ar putea să auzi ventilatoarele laptopului pornind. Pentru fundaluri uriașe pe tot ecranul, mai bine folosești două layere pseudo-element (::before, ::after) animate cu opacity sau transform: translate3d(), pentru că alea stau pe GPU.
Păstrați soluția asta pentru elemente mici și de impact mediu. Pentru restul, mai bine mai puțină mișcare decât un browser blocat.
Voi mai folosiți trucuri clasice de CSS înainte să aruncați un npm install pe o librărie grea?