// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
gradient: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
},
},
animation: {
gradient: 'gradient 8s ease infinite',
},
},
},
}
// În componenta ta HTML / React / Vue:
// <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-[length:200%_200%] animate-gradient h-64 w-full"></div>Am văzut recent pe un grup de Slack cum cineva trăgea într-un proiect Framer Motion doar ca să animeze un background gradient pe un hero section. Mi s-a zburlit puțin părul pe ceafă. Serios, am ajuns să instalăm zeci de kiloocteți de JavaScript pentru un efect vizual care se rezolvă elegant cu zece linii de CSS?
Am avut anul trecut un proiect cu vreo 15k de utilizatori unici pe zi. Era un landing page de produs unde viteza de încărcare era critică pentru conversie. Clientul voia neapărat acel "aurora glow" pe fundal, care să se miște încet, organic. Am refuzat din start orice librărie de animație și am mers pe clasicul truc cu background-position. Am economisit timp de descărcare și am obținut un scor de 99 pe Mobile în Lighthouse.
Cum funcționează logica din spate
Ideea e extrem de simplă și veche de când lumea. Faci un gradient care este de două sau trei ori mai mare decât containerul său (folosind background-size: 200% 200% sau chiar mai mult). Apoi, muți poziția acestui gradient (background-position) de la colțul din stânga-sus la cel din dreapta-jos și înapoi, într-o buclă infinită. Browserul face toată treaba grea de interpolare a culorilor.
În Tailwind CSS nu avem clase predefinite pentru animația asta specifică, dar configurarea este extrem de rapidă în fișierul de configurare.
Configurarea în Tailwind
Trebuie doar să extindem tema în tailwind.config.js. Adăugăm keyframes pentru mișcarea gradientului și definim animația custom pe care o vom apela direct din clase.
După ce ai salvat config-ul, tot ce trebuie să faci în HTML-ul tău este să aplici clasa de animație și să definești gradientul. Clasa magică de la Tailwind pe care o folosim este utilitarul arbitrar bg-[length:200%_200%] ca să forțăm mărimea fundalului fără să scriem CSS separat.
Trade-off-uri pe care trebuie să le știi
Nimic nu e perfect în web dev, iar animațiile pe proprietăți non-transform (cum e background-position) vin cu un cost de performanță dacă facem abuz.
Merge excepțional pentru:
- Butoane cu glow discret.
- Hero sections de dimensiuni medii.
- Carduri de produs care vor să iasă în evidență.
E nasol pentru:
- Fundaluri pe tot ecranul (full-screen body) pe dispozitive mobile vechi. Dacă mai pui și un
backdrop-filter: blur()peste el, o să vezi cum frame-rate-ul scade drastic pe un Android ieftin de acum 4 ani. Procesorul se va chinui să randeze din nou pixeli la fiecare frame deoarece proprietateabackground-positionforțează faza de paint a browserului.
Voi cum procedați când aveți de făcut chestii de genul ăsta? Aruncați rapid un npm install pentru o librărie sau încercați să stoarceți tot ce se poate din CSS-ul nativ?