skills.rest
agusmdev
agusmdevCOMMUNITY
Explore all skills by this author →
Website𝕏@agusmdevGitHub

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
One-click install
npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-shadcn-setup
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
zaid-khan-codezaid-khan-code
3

shadcn-stack

Design server-rendered Next.js App Router patterns with shadcn/ui and validated forms.

Community
Advanced
AndyMarigoldLabsAndyMarigoldLabs

tanstack-start-d3-charting

Generate SSR-safe D3 charts for TanStack Start with Tailwind v4 tokens.

Community
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate