# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/tools/tailwind-class-diff. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- [tools](/tools)/[tailwind](/tools/category/tailwind) # Tailwind class diff Paste two Tailwind class strings and see exactly which classes were added, removed and kept, plus which of the old ones cn() would silently override if the new string were merged on top. Before1 flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 After1 flex items-center gap-3 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground hover:bg-primary/90 focus-visible:ring-2 6added 6removed 6unchanged diff.txtdiff + added (6) gap-3 rounded-full px-6 py-3 font-semibold focus-visible:ring-2 - removed (6) gap-2 rounded-md px-4 py-2 font-medium shadow-sm = unchanged (6) flex items-center bg-primary text-sm text-primary-foreground hover:bg-primary/90 Applied through cn(), 5 of the old classes would be overridden by a newer one for the same property: gap-2, rounded-md, px-4, py-2, font-medium. They are not in the diff above because they were never removed, tailwind-merge just drops them. cn(before, after)text shadow-sm flex items-center gap-3 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground hover:bg-primary/90 focus-visible:ring-2 Order inside the string does not matter to Tailwind, so two strings with the same classes in a different order show as unchanged here. What does matter is a variant: hover:bg-x and bg-x are different classes, and the diff treats them that way. [Made something you like?Blocks built on this pattern](/blocks) ## Questions Why does order not show up as a change?+ Tailwind compiles each class on its own, so the order inside the string has no effect on the styles. The diff compares sets, which is what a reviewer actually wants: a reordered string is noise, a new class is a change. What is the overridden list?+ Classes from the first string that survive a plain diff but would be dropped by tailwind-merge when the second string is applied on top, because a later class sets the same property. It is the difference between what you wrote and what cn() ships. Are hover:bg-x and bg-x the same class?+ No. A variant makes a different class, and the diff keeps them apart. That is also why tailwind-merge does not let hover:bg-blue-500 override bg-red-500: they apply in different states. ## Related tools [Tailwind class merge playgroundSee exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed.](/tools/tailwind-class-merge)[Tailwind class sorterPut a class list back in order: layout first, then the box, then what is inside it, with variants after the base classes they modify.](/tools/tailwind-class-sorter)[Text diffCompare two versions of text or code line by line, see exactly what was added and what was removed, and copy the result as a unified diff patch.](/tools/text-diff) Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · ## The tools are free. So is most of the library. 2095 blocks and 1076 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours. [Browse the blocksBrowse the blocks](/blocks) No signup for the tools. MIT for free blocks, commercial licence for Pro. ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.