// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
gradient: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
},
},
animation: {
gradient: 'gradient 6s ease infinite',
},
},
},
}
// Utilizare în HTML / React:
// <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-[length:200%_200%] animate-gradient">
// Butonul tău animat
// </div>Săptămâna trecută am făcut un audit pe un landing page destul de simplu. Nimic complex, câteva secțiuni, un formular de lead-uri și un buton mare de "Call to Action". Când m-am uitat în Network tab, am văzut aproape 45KB de JS aduși doar pentru framer-motion. Pentru ce? Pentru un gradient animat pe fundalul butonului și pe un titlu. Mi s-a părut de-a dreptul absurd.
Am scos librăria aia imediat. Am rezolvat totul în 5 minute folosind utilitarele din Tailwind și câteva linii de CSS în fișierul de configurare. Rezultatul? Animația rulează acum la 60 FPS, randată direct de placa video, iar bundle-ul s-a ușurat considerabil.
Ideea din spatele trucului
Ca să animezi un gradient, nu poți folosi direct proprietatea transition pe background-image în mod nativ în toate browserele. E încă o zonă destul de gri în engine-urile de randare. Trucul clasic este să mărești fundalul la 200% sau chiar 400% folosind background-size și apoi să muți poziția acestuia (background-position) dintr-un colț în altul.
Practic, imaginează-ți că te uiți printr-o fereastră mică la un poster uriaș și muți posterul stânga-dreapta. Asta creează iluzia optică de fluiditate și mișcare continuă a culorilor.
Cum configurăm Tailwind
În mod normal, Tailwind nu are o animație predefinită pentru mișcarea poziției de fundal. Așa că trebuie să o adăugăm noi în tailwind.config.js. Nu te speria, sunt doar câteva rânduri de cod în care extindem tema nativă.
După ce definim keyframe-urile în config, Tailwind ne va genera automat clasa animate-gradient. Tot ce mai avem de făcut este să setăm dimensiunea fundalului la o valoare mai mare (de exemplu, bg-[length:200%_200%]) și să aplicăm culorile dorite pe element.
Unde e șmecheria și care sunt limitele?
Hai să fim sinceri și să vorbim despre trade-off-uri, că nimic nu e perfect în meseria asta.
De ce e genial:
- Performanță maximă: CSS-ul rulează direct pe thread-ul de rendering al browserului, nu blochează main thread-ul de JS.
- Zero KB adăugați: Tailwind doar generează câteva linii de CSS în build-ul final. Am economisit cam 30% la timpul de interacțiune pe dispozitive mobile slabe.
Unde devine nasol:
- Dacă ai nevoie de o animație care să reacționeze dinamic la poziția cursorului sau la scroll-ul utilizatorului, CSS-ul pur nu te mai ajută atât de mult. Acolo chiar ai nevoie de un strop de JS.
- Dacă vrei să schimbi culorile din mers pe baza unui state din React sau Vue, devine puțin mai greu de gestionat doar din clase statice.
Voi cum procedați când aveți de făcut micro-interacțiuni de genul ăsta? Trageți repede o librărie în package.json sau preferați să scrieți voi acele 3 linii de CSS?