Despre Tailwind CSS

Limbaje de Programare HTML & CSS
,
14

Nu sunt neaparat pro pentru tailwind. Cum zici si tu css modules, styled components sau in special svelte cu css in <style></style> sunt optiuni mai elegante si mai framework-less. Iar dupa cum stim framework-urile vin si se duc.

Dar se poate folosi tailwind ca sa faci ceva rapid, se poate combina tailwind cu styled-components sau oricum daca ai css conditional cu classnames sau clsx (foarte comun in react) atunci si tailwind o sa arate mai clar.

E.g tailwind cu classnames:

const bordered = false;
const btnClass = classNames(
 'mx-5',
 'my-10',
 'border-1', 
 {'border': bordered},
 'border-solid',
 'border-gray-500'
);
return <button className={btnClass}>

sau te limitezi si folosesti tailwind doar pentru componente simple/structura si unde ai nevoie de hardcore css introduci styled components sau css modules.

Mai exista si asa ceva, tailwind macro.

import tw, { css } from 'twin.macro'

const hoverStyles = css`
  &:hover {
    ${tw`text-black`}
  }
`

const stylesInput = ({ hasHover }) => [
    tw`border` // Add base styles first,
    hasHover && hoverStyles // Then conditional styles
]

const Input = props => <input css={stylesInput(props)} />

Single responsibility cu clonarea Input-ului cand vrei sa fie cu border mov:

const PurpleInput = tw(Input)`border-purple-500`

Aysun vezi ca si la tailwind ai variante si preset-uri ca sa extinzi/schimbi default-urile, e destul de complex, chiar ai de invatat ceva cu el. Dar daca ar fi sa compari un design system ca si Ant Design cu ceva componente care folosesc Tailwind sau cu un design system intern care are o echipa dedicata cu canal de slack pentru intrebari in loc de documentatie cred ca ai alege tailwind.
Sau stai sa vezi ce discutii atrage in design system propriu BEM cu SCSS compilat global cu un SCSS luat din fiecare componenta in parte. Poti sa strici tot design system-ul daca uiti/nu stii sa prefixezi ceva cum trebuie si testele e2e nu sunt facute sa verifice acest lucru. Doar visual testing-ul poate verifica bug-urile cauzate de ceva incorect din BEM si e un cosmar de intretinut.

2 Likes