// tailwind.config.js
// În loc să umpli componentele cu bg-[#0b0f19] și text-[13px],
// extinde tema cu câteva roluri clare:
module.exports = {
theme: {
extend: {
colors: {
surface: {
base: '#0b0f19',
raised: '#111827',
},
},
fontSize: {
// util când Figma chiar are o dimensiune non-standard des folosită
'caption-sm': ['13px', { lineHeight: '18px' }],
},
},
},
};Parantezele pătrate din Tailwind sunt o binecuvântare când ești pe fugă și un blestem pe termen lung. Te scot din impas în trei secunde, dar dacă nu ești atent, codebase-ul tău ajunge să arate ca un CSS inline scris cu picioarele. Vreau să lămurim exact unde se termină pragmatismul și unde începe haosul.
Cum am ajuns la 24 de nuanțe de gri
Acum vreun an am intrat pe un proiect de tip dashboard B2B, vreo 12k linii de JSX scrise de 3 developeri diferiți în 6 luni. La prima vedere, totul curat, Tailwind v3 la bord. Dar când am dat un search după bg-[# în repo, mi-a căzut fața: aveam vreo 40 de instanțe diferite pentru fundaluri întunecate. Fiecare dev copiase codul hex din Figma direct în paranteze pătrate: bg-[#0b0f19], bg-[#0d1117], bg-[#111827].
Efectul vizual era subtil, dar la nivel de mentenanță era groaznic. Când a venit clientul și a cerut un refresh pe tema de dark mode, n-am avut un singur token de schimbat. A trebuit să luăm la mână fișier cu fișier, să deducem ce a vrut să facă fiecare coleg și să unificăm manual.
Trade-off-ul e evident: arbitrary values îți dau viteză pe moment, dar aruncă pe geam principalul avantaj al Tailwind-ului — consistența vizuală.
Când arbitrary values au sens 100%
Nu sunt absurd, nu militez pentru o puritate absolută a sistemului de design. Există momente clare în care [ ] e soluția corectă:
- Dimensiuni fixe cerute de integrări externe: dacă integrezi un ad banner clasic de
w-[728px] h-[90px]sau un embed de la Stripe / YouTube, nu are niciun rost să poluezitailwind.config.jscu o clasă nouăw-leaderboard. O pui arbitrar și mergi mai departe. - Micro-ajustări grafice unice: o ilustrație SVG în Hero care trebuie să stea la
top-[13px] right-[-4px]ca să se alinieze cu o curbă din background. Aia e o excepție geometrică, nu un token reutilizabil. - Prototipare rapidă: ești într-un spike tehnic sau construiești o pagină de validare într-un weekend? Bagă arbitrary values fără milă. Important e să livrezi, nu să filozofezi pe design tokens.
Când e doar lene și tech debt mascat
Dacă scrii text-[13px], p-[18px] sau bg-[#2563eb], problema nu e Tailwind-ul, ci disciplina.
Culorile de brand, greutățile de font, spațierile de bază (padding, margin, gap) și razele de border (rounded-*) trebuie să stea mereu în tokens. De fiecare dată când sari peste ele, rupi ritmul vizual pe care un designer l-a calculat pe o grilă de 4px sau 8px.
Regula mea e simplă: regula lui 3. Dacă scrii aceeași valoare arbitrară a doua oară, e un semnal de alarmă. Dacă o scrii a treia oară, oprește-te 30 de secunde, deschide config-ul (sau @theme dacă ești deja pe Tailwind v4) și dă-i un nume semantic.
Voi cum gestionați parantezele pătrate în PR-uri: aveți un linter setat să le blocheze sau mergeți pe încredere în echipă?