tailwind-setup

Name: tailwind-setup
Availability: InStock
Author: Otoshek

Configure Tailwind CSS and shadcn/ui for React frontends with Django backends.

2|Updated Nov 19, 2025

Search Tags:#shadcn/ui #vite #tailwind #aliases #dark-mode

Ready to run

npx skills add https://github.com/otoshek/Claude-Code-Toolkit --skill tailwind-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-setup
Source: https://github.com/otoshek/Claude-Code-Toolkit/tree/main/skills/tailwind-setup
Command: npx skills add https://github.com/otoshek/Claude-Code-Toolkit --skill tailwind-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about tailwind-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up Tailwind CSS with shadcn/ui in a React Vite project?▼

Tailwind CSS setup with shadcn/ui involves installing dependencies, configuring Vite with the Tailwind plugin, updating your CSS entry point, creating shadcn scaffolding files (components.json, jsconfig.json), and wrapping your app with ThemeProvider. This Skill automates those steps and verifies the build.

Can I use shadcn/ui components with dark mode in my React app?▼

Yes. This Skill configures shadcn/ui with class-based dark mode by applying theme tokens to your Tailwind config, adding a ThemeContext and ThemeToggle component, and enabling theme switching across your entire app without manual style overrides.

How do I configure path aliases like @ for imports in Vite and Tailwind?▼

Path aliases are set up in vite.config.js and jsconfig.json to enable clean imports like @/components. This Skill configures both files so @ resolves to your src directory, reducing relative path complexity in large projects.

What dependencies do I need to install for Tailwind and shadcn/ui?▼

Tailwind CSS setup requires tailwindcss, autoprefixer, shadcn/ui core dependencies, and the Vite Tailwind plugin. This Skill installs all dependencies, updates your build config, and verifies the setup with an npm build check.

Does this work with an existing React project, or only new projects?▼

This Skill applies to both new and existing React + Vite projects. It updates your Vite config, replaces your CSS entry, scaffolds shadcn files, and integrates ThemeProvider without requiring a fresh setup.

Why should I use Tailwind with shadcn/ui instead of other UI libraries?▼

Tailwind with shadcn/ui provides utility-first styling, component-level dark mode support, and rapid design consistency through pre-built shadcn components. Tailwind's token system and dark mode strategy integrate seamlessly with shadcn's class-based approach for maintainable, themeable UIs.