tailwind-v4-shadcnConfigures Tailwind v4 with shadcn/ui using a mandatory four-step CSS variable theming to enable automatic dark mode and prevent common errors.
Install via ClawdBot CLI:
clawdbot install wpank/tailwind-v4-shadcnGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://wordpress-auditor.webfonts.workers.devAudited Apr 17, 2026 · audit v1.0
Generated Mar 1, 2026
Developers starting a fresh project with React and Vite can use this skill to quickly configure Tailwind v4 and shadcn/ui, ensuring a production-ready setup from day one. It prevents common errors like build failures or broken dark mode, saving time on debugging and configuration.
Teams migrating existing projects from Tailwind v3 to v4 can follow the provided migration guide and error solutions to avoid pitfalls such as broken @apply rules or missing theme configurations. This ensures a smooth transition without disrupting current functionality.
When colors or dark mode stop working in a Tailwind v4 project, this skill offers step-by-step fixes for errors like missing @theme inline mappings or incorrect CSS variable usage. It helps developers quickly restore theming without deep diving into documentation.
Organizations building scalable web applications can leverage the production-tested templates to enforce a consistent theming architecture. This reduces maintenance overhead and ensures reliable performance across different environments.
Freelancers can use this skill to streamline client projects, offering faster setup times and fewer bugs, which leads to higher client satisfaction and repeat business. It allows them to charge premium rates for reliable, modern tech stacks.
SaaS companies building internal tools or customer-facing apps can integrate this skill to maintain consistent UI theming across teams, reducing development cycles and support costs. It supports scalable growth with minimal configuration overhead.
Digital agencies can adopt this skill for client deliverables to ensure high-quality, error-free frontend implementations, enhancing their reputation and enabling upselling of maintenance packages. It standardizes processes across multiple projects.
💬 Integration Tip
Follow the mandatory four-step architecture exactly to avoid common errors; always delete old tailwind.config.ts files and use the @tailwindcss/vite plugin for Vite projects.
Scored Apr 19, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.