Skills
.Work. You
Rest

tailwind-setup

Community

Tailwind + shadcn/ui with dark mode and theme tokens.

Software Engineering#shadcn/ui#vite#tailwind#aliases#dark-mode
Authorotoshek
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill boots Tailwind CSS and shadcn/ui into a React frontend, adds a dark-mode theme and aliases, and scaffolds UI components to accelerate consistent design across the app.

Core Features & Use Cases

  • Installs Tailwind CSS, Vite Tailwind plugin, and core shadcn/ui dependencies.
  • Updates vite.config.js to run tailwindcss() and sets up @ alias for clean imports.
  • Replaces the CSS entry with a Tailwind-based setup and appends a comprehensive theme via a tailwind theme file.
  • Creates shadcn scaffolding (components.json, jsconfig.json, utils.js) and enables class-based dark mode.
  • Adds ThemeContext and ThemeToggle components; wraps App with ThemeProvider.
  • Installs shadcn/ui components (card, input, button, table, etc.) and verifies builds.

Quick Start

Run the theme apply script and build to verify Tailwind + shadcn/ui is wired correctly.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tailwind-setup
Download link: https://github.com/otoshek/Claude-Code-Toolkit/archive/main.zip#tailwind-setup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.