tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

5|Updated Feb 12, 2026

Search Tags:#theming #setup #tailwind #shadcn-ui #dark-mode #tanstack-router #tanstack-start

Ready to run

npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-shadcn-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-shadcn-setup
Source: https://github.com/agusmdev/fullstack-ai-template/tree/main/.claude/skills/tanstack-shadcn-setup
Command: npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-shadcn-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines setting up Tailwind CSS v4 and shadcn/ui in TanStack Start (SSR) or TanStack Router (SPA) projects, ensuring consistent theming, CSS variables, and component scaffolding.

Core Features & Use Cases

Tailwind v4 scaffolding and postcss integration setup
shadcn/ui CLI initialization and component scaffolding
Works for both TanStack Start and TanStack Router projects with theming support

Quick Start

Run the setup steps to initialize Tailwind CSS v4 and shadcn/ui in your TanStack Start or TanStack Router project.

Frequently Asked Questions about tanstack-shadcn-setup

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

FAQPage Schema

How do I set up Tailwind CSS v4 and shadcn/ui in a TanStack Start project?▼

To set up Tailwind CSS v4 and shadcn/ui in a TanStack Start project, you need an existing project with a Node.js environment running Bun or npm to initialize the packages, configure postcss integration, and scaffold components.

Can I configure shadcn/ui theming and dark mode for TanStack Router SPA applications?▼

Yes, you can configure shadcn/ui theming and dark mode for TanStack Router SPA applications. The setup process supports both SPA workflows and SSR projects, handling global CSS variables and consistent theming.

What is required before configuring shadcn/ui and Tailwind in my TanStack project?▼

Before configuring shadcn/ui and Tailwind, you need an existing TanStack Start or TanStack Router project and a Node.js environment with Bun or npm installed to run the CLI initialization and package installation.

What's the best way to scaffold shadcn/ui components for TanStack Start SSR?▼

The best way to scaffold shadcn/ui components for TanStack Start SSR is using the shadcn/ui CLI initialization within your existing project, which configures the necessary CSS variables and component structures for server-side rendering.

Does Tailwind v4 postcss integration work with TanStack Start and TanStack Router?▼

Yes, Tailwind v4 postcss integration works with both TanStack Start and TanStack Router. The setup streamlines the postcss configuration and global CSS setup to ensure consistent styling across SSR and SPA workflows.