// 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',
},
},
},
}
// Utilizare în HTML/JSX:
// <div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-[length:200%_200%] animate-gradient">
// Conținutul tău aici
// </div>Am avut recent un proiect unde clientul voia un vibe modern pe hero section. Știi tu stilul ăla de gradient care se mișcă lent în spate, să pară site-ul viu, nu doar o poză statică și plictisitoare. Prima mea reacție, fiind obișnuit cu ecosistemul React, a fost să arunc un Framer Motion acolo și să rezolv treaba în 5 minute.
Dar mi-am dat seama că adăugam vreo 25-30kb la bundle doar pentru un fundal. La un proiect cu 15k useri lunari, din care mulți vin de pe telefoane mid-range, fiecare milisecundă de execuție JS contează. Așa că am șters librăria și m-am întors la bază: CSS pur aplicat prin Tailwind.
Logica din spatele iluziei
Gradientul animat e, în esență, o păcăleală vizuală. Nu muți culorile în sine, ci muți poziția imaginii de fundal. Schema e simplă: faci fundalul mult mai mare decât containerul (de exemplu, 200%) și apoi îl plimbi de la stânga la dreapta.
În Tailwind, nu avem o utilitate nativă pentru asta, așa că trebuie să ne băgăm puțin degetele în tailwind.config.js. Am pățit de multe ori să uit să setez background-size și să mă întreb de ce nu se mișcă nimic. Dacă fundalul are exact aceeași dimensiune ca div-ul, n-are unde să se ducă, oricât l-ai mișca din background-position.
Configurarea în Tailwind
Ca să nu scrii CSS brut în fișiere separate, cel mai curat e să extinzi tema. Adaugi un set de keyframes și o animație custom. Am ales o viteză de 8 secunde pentru că orice e mai rapid de atât devine obositor pentru ochi și distrage atenția de la textul principal (CTA).
După ce ai configurat asta, tot ce trebuie să faci e să aplici clasele pe elementul tău. O să ai nevoie de bg-gradient-to-r, culorile tale preferate, bg-[length:200%_200%] (ca să forțezi dimensiunea aia mare de care ziceam) și clasa de animație pe care tocmai ai definit-o.
Trade-off-uri sincere
Merge brici pentru fundaluri simple, dar e nasol dacă ai nevoie de ceva ultra-complex, gen mesh gradients care reacționează la cursor. Acolo deja intri în zona de Canvas sau librării grele dacă vrei să arate fluid.
Un alt minus e mentenanța culorilor. Dacă vrei să schimbi culorile gradientului dinamic dintr-un CMS sau un state de React, Tailwind-ul static devine cam rigid. Poți folosi variabile CSS injectate prin style, dar deja începe să arate urât codul.
La proiectul menționat, am economisit cam 30% la timpul de 'Main Thread Work' pe pagină eliminând animația bazată pe JS. Utilizatorul nu vede codul, dar simte când browser-ul nu 'gâfâie' la scroll.
În concluzie, dacă vrei doar un fundal care să nu pară mort, CSS-ul e rege. Voi mai folosiți biblioteci externe pentru animații simple sau ați rămas fani vanilla pentru performanță?