module.exports = {
theme: {
extend: {
keyframes: {
gradient: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
},
},
animation: {
gradient: 'gradient 6s ease infinite',
},
},
},
}Am văzut recent codul unui landing page făcut de un junior. Arăta bine, se mișca fin, dar când m-am uitat în DevTools, am vrut să-mi fac cruce. Trăsese Framer Motion și încă vreo două utilitare de animație doar ca să miște un gradient pe fundalul unui buton și al unui heading.
Mi s-a zburlit puțin părul pe ceafă. La un proiect cu 12k vizitatori unici pe lună, fiecare kilobyte în plus la bundle-ul de JS înseamnă bani pierduți și loading mai mare pe mobil. Am luat la mână codul și am înlocuit tot acel balast cu zece linii de CSS în configurarea de Tailwind. Am economisit cam 35KB la build-ul final și rezultatul vizual a fost identic.
Care-i șmecheria din spate?
Ideea e simplă și veche de când lumea. Nu poți anima direct culorile unui gradient cu tranziții CSS clasice (browserul nu știe să facă interpolare ușoară între culori în mod nativ).
În schimb, ce putem face este să facem fundalul mult mai mare decât elementul în sine (de exemplu, 200% din lățime) și apoi să mutăm poziția fundalului (background-position) de la stânga la dreapta. Browserul randează gradientul uriaș, iar noi doar mișcăm "fereastra" prin care se vede acesta.
Pasul 1: Extindem Tailwind Config
Ca să nu scriem CSS murdar direct în fișiere separate, cel mai curat este să învățăm Tailwind despre noua noastră animație. Mergem în tailwind.config.js (sau tailwind.config.ts) și adăugăm keyframe-urile și clasa de animație în secțiunea de theme.extend:
// Nu pune codul ăsta în CSS-ul global, pune-l în config
(Vezi blocul de cod de mai jos pentru implementarea exactă)
Pasul 2: Aplicăm clasele în HTML/React
După ce ai salvat config-ul, tot ce trebuie să faci este să folosești utilitarele Tailwind direct pe elementul tău.
Trebuie să-i spunem browserului trei lucruri: culorile gradientului, dimensiunea fundalului (să fie dublă) și să pornească animația pe care tocmai am definit-o. Clasa utilitară pentru dimensiune se scrie super simplu cu sintaxa arbitrară de la Tailwind: bg-[length:200%_200%].
Un exemplu concret de element:
<div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-[length:200%_200%] animate-gradient text-white p-8 rounded-xl"> Conținutul tău mișcător </div>
Compromisul sincer: Performanță vs. Estetică
Tehnica asta merge brici și e extrem de ușor de implementat. Totuși, ca dev senior, trebuie să fiu sincer cu tine legat de trade-off-uri.
Animarea proprietății background-position forțează browserul să facă repaint la fiecare cadru. Pentru un buton mic sau un text pe un landing page, impactul este zero barat. Însă, dacă vrei să pui asta ca fundal full-screen pe o pagină extrem de lungă, plină de imagini și alte elemente complexe, s-ar putea să observi un mic drop de FPS pe telefoanele Android mai vechi.
În acele cazuri extreme, mai bine folosești un element separat cu will-change: transform și animezi un transform: translate3d() care rulează direct pe GPU. Dar pentru 95% din cazuri, metoda cu background-position din Tailwind e sfântă.
Voi cum abordați genul ăsta de detalii vizuale? Trageți repede o librărie de JS în proiect sau preferați să stoarceți tot ce se poate din CSS nativ?