// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
gradient: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
},
animation: {
gradient: 'gradient 6s ease infinite',
},
},
},
};Am văzut prea multe proiecte care trag după ele framer-motion sau zeci de kilobyte de JS doar ca să miște un amărât de gradient pe un card. N-are niciun sens să aglomerezi bundle-ul pentru o chestie pe care browserul o face nativ de vreo zece ani. Cu Tailwind și trei linii de CSS rezolvi problema direct pe GPU, fără să atingi runtime-ul de JavaScript.
Cum funcționează mecanica din spate
Secretul e banal de simplu: ca să miști un gradient, trebuie mai întâi să-l faci mai mare decât containerul în care stă. Dacă gradientul are dimensiunea exactă a div-ului (100%), nu ai ce să animezi, fiindcă imaginea de fundal ocupă deja tot spațiul.
Așa că forțăm un background-size: 200% 200% (sau chiar 300%). Practic, ascunzi jumătate din gradient în afara vizualizării, iar prin @keyframes muți doar background-position de la 0% 50% la 100% 50% și înapoi. Browserul interpolează coordonatele, iar rezultatul este acea trecere lină, organică, fără sacadări.
Integrarea curată în Tailwind
La un landing page recent cu vreo 15k de unici pe lună, clientul voia un chenar „glowy” pe butonul de checkout și pe cardul de prețuri enterprise. Am rezolvat totul extinzând tema direct în tailwind.config.js:
După ce ai pus cheile în config, în markup folosești clasele fără bătăi de cap:
<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-[length:200%_200%] animate-gradient p-1 rounded-xl">
<div class="bg-slate-900 p-6 rounded-lg text-white">
Card cu bordură animată finuț
</div>
</div>
Clasa arbitrară bg-[length:200%_200%] funcționează perfect în Tailwind v3. Dacă folosești Tailwind v4, poți defini asta direct în fișierul CSS principal prin directiva @theme, fără să mai ai nevoie de fișierul de configurare JS.
Trade-off sincer: unde merge brici și unde te arzi
Soluția asta e genială pentru suprafețe mici: butoane de CTA, tag-uri de tip „New”, borduri subțiri sau text cu bg-clip-text. Am scăpat de vreo 38kb gzipped prin simplul fapt că n-am instalat o librărie de animații pentru două efecte pe o pagină.
Unde devine nasol? Pe suprafețe uriașe. Dacă pui un gradient animat cu background-size: 300% pe tot ecranul (h-screen w-screen) și utilizatorul intră de pe un telefon Android mid-range sau un iPhone mai vechi, GPU-ul o să muncească serios. Safari pe mobil are prostul obicei să crească consumul de baterie vizibil dacă lași un canvas mare cu repaint continuu sub un text lung care are și scroll.
Folosește tehnica asta cu măsură, ca accent vizual, nu ca tapet pentru tot site-ul.
Voi mai folosiți librării dedicate de animație pentru chestii pur vizuale de genul ăsta, sau trageți de CSS nativ până la capăt?