20:I[238914,["/_next/static/chunks/144c003qaudkf.js","/_next/static/chunks/0kf3n8rnsar0y.js","/_next/static/chunks/0bet53rhd76ao.js","/_next/static/chunks/08gfvy5wn8413.js","/_next/static/chunks/0f9-ccpgf2l37.js","/_next/static/chunks/0-69m0v4lwrwo.js","/_next/static/chunks/011-g1._zzygq.js","/_next/static/chunks/0o-ppy1xw07xk.js","/_next/static/chunks/135dy8oj037.s.js","/_next/static/chunks/145sp-95keou8.js","/_next/static/chunks/08qivg1fssmyj.js","/_next/static/chunks/1332563el9cco.js","/_next/static/chunks/0zgshrnaghbpz.js"],"CssTailwindDocArticleView"] 21:T5da,## Component Abstraction У Tailwind нормально писати utilities прямо в JSX. Це добре, поки компонент простий. ```tsx ``` З часом - довгі template strings, дублювання, важко читати: ```tsx ``` --- ## Extracting React components ```tsx type ButtonProps = React.ButtonHTMLAttributes; export function Button({ className, children, ...props }: ButtonProps) { return ( ); } ``` ```tsx ``` Рядок класів усе ще незручний - далі composition і `cn`. 22:T5c0,У Tailwind нормально писати utilities прямо в JSX. Це добре, поки компонент простий. ```tsx ``` З часом - довгі template strings, дублювання, важко читати: ```tsx ``` --- ## Extracting React components ```tsx type ButtonProps = React.ButtonHTMLAttributes; export function Button({ className, children, ...props }: ButtonProps) { return ( ); } ``` ```tsx ``` Рядок класів усе ще незручний - далі composition і `cn`. 23:T5d3,