Tailwind CSS i biblioteki UI React

Co to jest Tailwind CSS i dlaczego jest popularny?

Tailwind CSS: utility-first CSS framework (Adam Wathan, 2017). Zamiast pisać CSS klasy semantyczne (.card, .btn-primary), używasz utility klas bezpośrednio w HTML. Filozofia: utility-first (nie component-based jak Bootstrap). Atomic CSS — jedna klasa, jeden styl. Tailwind przykład: div className='flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow'. Zalety Tailwind: brak context switching (HTML+CSS razem). Brak konfliktu klas (globalne CSS problemy). PurgeCSS built-in (tylko użyte klasy w bundlu). Spójny design system (spacing scale, colors, etc). Responsive: md:flex lg:hidden. Dark mode: dark:bg-gray-800. Wady: długie klasy (ugly HTML). Krzywa uczenia się (zapamiętywanie klas). Tailwind v4 (2025): CSS-first config (@theme block w CSS zamiast tailwind.config.js). Oxide engine (Lightning CSS, Rust). Zero-config. Automatyczne content detection. @theme {--color-primary: #3b82f6;}. @layer utilities i components. Plugin API nowe. Instalacja: npm install tailwindcss @tailwindcss/vite. Tailwind plugins: @tailwindcss/forms, @tailwindcss/typography (prose class), @tailwindcss/aspect-ratio, @tailwindcss/container-queries. Tailwind merge (twMerge/clsx/cn): cn('base classes', conditional && 'extra') — merge bez konfliktu. Headless UI: animacje bez stylów (Tailwind Labs). Radix UI: prymitywy dostępności + Tailwind.

shadcn/ui — co to jest i jak różni się od tradycyjnych UI libraries?

shadcn/ui (Shadcn, 2023): NIE jest biblioteka (npm package). Kolekcja re-używalnych komponentów kopiowanych do projektu. Bazuje na Radix UI (primitives) + Tailwind CSS. Filozofia: posiadasz kod komponentów. Customizacja bez override hacków. Nie update biblioteki — modyfikujesz lokalnie. Instalacja komponentu: npx shadcn-ui@latest add button. Kopiuje Button.tsx do projektu. Jak działa: Radix UI — behavior (accessibility, keyboard nav, ARIA). Tailwind — styl. cn() — merge klas wariantów. class-variance-authority (cva) — warianty komponentów. Dostępne komponenty: Button, Input, Form, Select, Dialog, Dropdown, Toast, Table, Card, Badge, Avatar, Command (command palette), Calendar, Date Picker, Combobox, DataTable (TanStack Table). Warianty z cva: buttonVariants({variant: 'outline', size: 'sm'}). Kustomizacja: edytuj lokalny plik. Dodaj własne warianty. Zmień kolory (CSS variables w globals.css). Theming: CSS variables dla dark/light mode. --background, --foreground, --primary, --secondary. Automatyczne dark mode. Popularne alternatywy: Radix Themes — styled Radix UI. Mantine — React components z hookes. Chakra UI — accessible component library. Ant Design — enterprise UI. MUI (Material UI) — Google Material Design.

CSS Modules vs CSS-in-JS vs Utility-first — kiedy co wybrać?

CSS Modules: lokalne scopy CSS per plik. styles.module.css + className={styles.container}. Zero runtime overhead. TypeScript support (typed-css-modules). Zalety: familiar CSS, zero JS overhead. Wady: brak dynamic styling (wartości z JS trudne). Verbose import. CSS-in-JS (styled-components, Emotion): CSS w JavaScript. Dynamiczne style (props). Template literals. Runtime overhead (styled-components wstrzykuje style). Zero-runtime CSS-in-JS: Linaria, Vanilla Extract, PandaCSS, StyleX (Facebook). Kompilowane do statycznego CSS. Brak runtime overhead. TypeScript first. Vanilla Extract: CSS typowane w TypeScript. style() — static styles. styleVariants() — warianty. recipe() — cva-like API. Kompilowany do CSS. Zero runtime. StyleX (Facebook): scoped styles jak CSS Modules. Zero-runtime. Collision-free. Statically extracted. Używane przez Meta wewnętrznie. UnoCSS: atomic CSS engine (Vite ecosystem). Preset Tailwind/Wind, Windi, Icons. Szybszy niż Tailwind (on-demand). Tailwind vs Bootstrap 5: Tailwind — utility classes, własny design. Bootstrap — komponenty gotowe, opinionated. Tailwind dla custom design. Bootstrap dla szybkiego prototypu z domyślnym wyglądem. Rekomendacja 2024: SPA/Next.js + Tailwind + shadcn/ui. Lub Tailwind + Radix UI + Headless UI. CSS Modules dla legacy i narzut zero. Vanilla Extract dla type-safe, zero-runtime. CSS-in-JS runtime unikaj w SSR/RSC.

Radix UI i Headless UI — komponenty bez stylów i dostępność?

Headless UI components: behavior i accessibility bez stylów. Keyboard navigation wbudowana. ARIA attributes. Focus management. Ty dodajesz style (Tailwind lub inne). Radix UI (WorkOS): prymitywy dla React. @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-select. W pełni dostępny (WAI-ARIA). Unstyled — dodajesz Tailwind. shadcn/ui bazuje na Radix UI. Headless UI (Tailwind Labs): Dialog, Disclosure, Menu, Listbox, Switch, Tabs, Combobox, Transition. Tailwind companion. Komp: Combobox — custom select z wyszukiwaniem. Mantine: React components z wbudowanymi hookami (useMantine*). Własny theme system. form handling. Notification system. Rich text editor. Kalendarz. Motyw light/dark. Bundle size większy niż shadcn/ui. Chakra UI: accessible, theme-able React components. Design tokens. Hooks: useDisclosure, useBreakpointValue. Emotion pod spodem (CSS-in-JS runtime). Wersja v3 2024 — mniejszy bundle. Accessible components best practices: focus-visible: outline. aria-label dla ikon bez tekstu. role='button' tylko gdy nie ma button elementu. Dialog: focus trap. Live regions (aria-live) dla dynamic content. Keyboard: Escape zamyka modal. Tab cycle w dialogu. Enter aktywuje button.

Tailwind CSS v4 i ekosystem 2024 — co nowego?

Tailwind CSS v4 nowości: Oxide engine: Rust-based (Lightning CSS). 5-10x szybszy build. CSS-first configuration (tailwind.config.ts zastąpiony przez CSS). @import 'tailwindcss' w CSS startuje całość. @theme directive w CSS zamiast JSON config. Automatic content detection (nie trzeba content: paths). Nowe utility klasses: text-shadow-*, mask-*, mix-blend-*, in-* variant (CSS @starting-style). Container queries: @container + @lg:grid-cols-2. Starting style animations: @starting-style — animacje przy pojawieniu elementu. Composable variants: group-has-*, peer-not-*, in-data-*. Gradient: bg-linear-* (multi-stop). P3 wide gamut colors. Tailwind v4 alpha -> beta -> stable 2025. Ekosystem narzędzi 2024: Prettier plugin dla Tailwind (sortuje klasy automatycznie). eslint-plugin-tailwindcss (lint klasy). Tailwind CSS IntelliSense (VSCode extension). Heroicons (ikony od Tailwind Labs). Catalyst (paid component kit od Tailwind Labs). tw-merge / tailwind-merge: bezpieczne mergowanie klas Tailwind. Eliminacja konfliktu (np. bg-red-500 + bg-blue-500 -> ostatni wygrywa). Używane w shadcn/ui (cn() function). clsx + twMerge = cn(). Figma do Tailwind: Figma plugin kopiujący Tailwind classes. Supernova.io dla design tokens.

Wyślij zapytanie