# Vite Shadcn Tailwind4

> Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix).

Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix). Use proactively for Vite project setup, shadcn component installation, or Tailwind v4 configuration.
Examples:
- user: "Setup shadcn in my Vite project" → install deps, configure tailwind v4 CSS-first, init shadcn, verify components work
- user: "Add shadcn to existing Vite app" → check existing config, install CLI, add components.json, update CSS imports
- user: "Use Tailwind v4 with shadcn" → configure @import with @theme, remove v3 config, setup custom tokens
- user: "Create Vite + React + shadcn project" → scaffold Vite, install shadcn, configure theme, add sample components

- Page: https://ss33.ai/skills/igorwarzocha/vite-shadcn-tailwind4-37036974243
- Publisher: igorwarzocha
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- Source: https://github.com/igorwarzocha/opencode-workflows/blob/6444ec4aac80ede26fed1a51832d83e3f0598026/agents/vite-react-ts-convex-tailwind/.opencode/skill/vite-shadcn-tailwind4/SKILL.md

## Skill

This skill's licence does not allow redistribution, so the store does not serve its text. Get it from the author: https://github.com/igorwarzocha/opencode-workflows/blob/6444ec4aac80ede26fed1a51832d83e3f0598026/agents/vite-react-ts-convex-tailwind/.opencode/skill/vite-shadcn-tailwind4/SKILL.md