Set Up Tailwind v4 with shadcn/ui
Tailwind v4 and shadcn/ui setup can fail because v4 changes config, plugins, and theme handling. This skill guides Claude, Codex, or Claude Code through tested templates and troubleshooting steps.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "tailwind-v4-shadcn" from https://skillstore.io/skills/jezweb-tailwind-v4-shadcn.md and its manifest at https://skillstore.io/api/skills/jezweb-tailwind-v4-shadcn/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "tailwind-v4-shadcn". Set up Tailwind v4 and shadcn/ui in a fresh Vite React project.
Expected outcome:
Using "tailwind-v4-shadcn". bg-primary does not apply styles after upgrading to Tailwind v4.
Expected outcome:
Using "tailwind-v4-shadcn". Migrate a Tailwind v3 app that uses config-based colors and animation plugins.
Expected outcome:
Static analysis flagged many patterns, but review found documentation snippets, setup examples, source links, and normal configuration values. No prompt injection, malware intent, credential access, or data exfiltration behavior was found. The remaining operational risk is ordinary package installation and file changes when a user applies the setup guidance.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/jezweb-tailwind-v4-shadcn?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/jezweb-tailwind-v4-shadcn?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/jezweb-tailwind-v4-shadcn/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/jezweb-tailwind-v4-shadcn.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>jezweb. (2026). tailwind-v4-shadcn security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4@techreport{jezweb-jezweb-tailwind-v4-shadcn-2026,
author = {jezweb},
title = {tailwind-v4-shadcn security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "tailwind-v4-shadcn security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "jezweb"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4"
identifiers:
- type: other
value: "skillstore:jezweb-tailwind-v4-shadcn:audit:4"
description: "Skillstore immutable audit report identifier"
Create a new Vite React project with Tailwind v4, shadcn/ui, path aliases, and dark mode support.
Resolve broken bg-primary utilities, duplicate base layers, dark mode failures, and animation import errors.
Move theme settings from config files into CSS variables and update plugins for Tailwind v4.
Set up Tailwind v4 with shadcn/ui in my Vite React project. Use the skill templates and explain each file change before applying it.
Review my existing Vite React project and add Tailwind v4 with shadcn/ui. Preserve current app code and list any conflicting files first.
Use the Tailwind v4 shadcn guidance to diagnose why my semantic colors or dark mode are not working. Show the likely cause and a fix plan.
Audit my Tailwind v3 setup and create a migration plan for Tailwind v4 and shadcn/ui. Include risks, file changes, and verification steps.
Author
jezwebLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
a25199bc7d6b82598536822d1738eb5d5f54025b
Maintenance freshness
7/18/2026
Usage
10 downloads · 173 views
File structure
Build shadcn/ui Interfaces Faster
by google-labs-code
Modern React teams need consistent shadcn/ui components without repeated setup research. This skill guides component selection, installation, theming, migration, and quality checks.
Build Fullstack Apps With Senior Guidance
by alirezarezvani
Fullstack projects often need consistent setup, architecture choices, and quality checks. This skill provides scripts and references for React, Next.js, Node.js, GraphQL, and PostgreSQL work.
Build Type-Safe React Components
by softaworks
React TypeScript work often needs precise event, hook, and route types. This skill provides focused patterns for typed components, React 19 APIs, and routing.
Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Optimize React and Next.js Code
by vercel-labs
React and Next.js applications often lose performance through waterfalls, large bundles, and avoidable re-renders. This skill gives Claude, Codex, and Claude Code concrete review rules for faster frontend work.