# 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/css-to-tailwind. 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) # CSS to Tailwind Turn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class. CSScss0 Load sampleClear usage.tsxtsx The classes appear here Copy the classes alone [Made something you like?Blocks written in these utilities](/blocks) ## Questions How are sizes turned into the scale?+ A value that is a multiple of 4px becomes a scale step, so 24px is p-6 and 1rem is m-4\. Anything else becomes an arbitrary value rather than being rounded, because a silently changed measurement is the worst possible output. Why are some declarations left out?+ Because they have no utility. Custom properties and rules such as mix-blend-mode are reported under the output instead of being guessed at, and they belong in CSS next to your classes. Are the colors converted to theme names?+ No, they come out as arbitrary values holding your exact color. Mapping a hex onto a theme name would need your theme, and the tool would be guessing which token you meant. ## 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 v3 config to v4Paste a tailwind.config.js and get the v4 CSS it becomes: an @theme block with the right variable namespaces, and a note for every part that needs a decision.](/tools/tailwind-config-migrator)[CVA variant builderWrite variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use.](/tools/cva-builder) 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. 1935 blocks and 989 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.