Configure Tailwind v4 and shadcn/ui with CSS-first theming and dark mode.
npx skills add https://github.com/nubler-hq/tiny --skill shadcn-ui-nubler-hq
Please help me install this Agent Skill. Skill: shadcn-ui Source: https://github.com/nubler-hq/tiny/tree/main/.github/skills/shadcn-ui Command: npx skills add https://github.com/nubler-hq/tiny --skill shadcn-ui-nubler-hq
This Skill provides a structured approach to configuring Tailwind v4 + shadcn/ui projects using a CSS-first theming architecture with semantic variables and an automatic dark mode.
To begin, install Tailwind v4 and shadcn/ui, initialize shadcn, configure the components.json, implement a ThemeProvider, and wrap your app entry point with the provider.
High-intent search queries and answers about installing and using this skill.
To migrate Tailwind v3 to v4, this skill eliminates tailwind.config.ts and adopts a CSS-first workflow using semantic CSS variables and a four-step architecture, ensuring consistent theming across your React and Vite environment.
Dark mode in Tailwind v4 and shadcn/ui is configured using an automatic dark mode approach within a CSS-first theming architecture, employing semantic CSS variables and a ThemeProvider pattern to ensure predictable styling transitions.
Yes, shadcn/ui works with Tailwind v4 in Vite environments by utilizing a CSS-first theming approach, mapping root CSS variables through @theme inline, and applying unlayered base styles for reliable UI configuration.
Configuring semantic CSS variables for Tailwind v4 involves a four-step architecture: defining root CSS variables, mapping them via @theme inline, applying unlayered base styles, and enabling automatic dark mode for consistent UI theming.
A ThemeProvider pattern is required for shadcn/ui dark mode to enforce the four-step theming architecture and ensure consistent UI theming, wrapping your React app entry point to manage predictable styling and automatic dark mode transitions.
The primary limitation of CSS-first theming in Tailwind v4 migrations is the required elimination of tailwind.config.ts, meaning previous JavaScript-based configuration logic must be fully translated into semantic CSS variables and @theme inline mappings.
jubalmInitialize shadcn/ui in React projects with Tailwind CSS v4 configuration.
Yoriichi-DangMigrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.
TNHoang2708Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.
gouravsingh311Configure Tailwind v4 design tokens using CSS-first @theme directives.
