skills.rest
PolicyEngine
PolicyEngineOFFICIAL
Explore all skills by this author →
Website𝕏@thepolicyengineGitHub

policyengine-tailwind-shadcn

Bridge PolicyEngine design tokens to Tailwind v4 utilities via @theme inline blocks.

2|Updated Mar 31, 2026
Search Tags:#theming#frontend#tailwind#shadcn-ui#css-variables#design-tokens
One-click install
npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-tailwind-shadcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: policyengine-tailwind-shadcn
Source: https://github.com/PolicyEngine/policyengine-skills/tree/main/skills/frontend/policyengine-tailwind-shadcn-skill
Command: npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-tailwind-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PolicyEngine frontend projects struggle to align design tokens with Tailwind utilities. This skill documents how to bridge tokens defined in :root to Tailwind's @theme system and how to apply them consistently across components.

Core Features & Use Cases

  • Provides a mechanism to map design tokens to Tailwind v4 utilities via @theme and @theme inline blocks.
  • Enables consistent theming across PolicyEngine UIs by centralizing design tokens in a single CSS file.
  • Use Case: A project wants a teal primary button that adapts to light/dark modes via CSS variables and Tailwind utilities.

Quick Start

Import the theme.css into your globals.css and begin applying the Tailwind utilities bridged by the shadcn tokens.

Frequently Asked Questions about policyengine-tailwind-shadcn

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

FAQPage Schema
How do I bridge design tokens to Tailwind v4 utilities?▼

Bridge design tokens to Tailwind v4 by mapping :root CSS variables into @theme inline blocks, generating a static theme CSS file that ensures consistent styling across typography and colors.

How do I apply shadcn/ui design tokens for light and dark mode theming?▼

Apply shadcn/ui design tokens for light and dark modes by centralizing them as CSS variables, allowing components to automatically adapt styles at runtime through var() bridging.

Does shadcn/ui work with Tailwind v4 CSS variables?▼

Yes, shadcn/ui works with Tailwind v4 by bridging runtime CSS variables into static @theme blocks, allowing utility classes to consume design tokens consistently across the application.

What is the best way to centralize design tokens for frontend projects?▼

The best way to centralize design tokens is using a single publishable theme CSS file that defines :root tokens and bridges them to Tailwind utilities, ensuring consistent theming across projects.

Why are my Tailwind utilities not picking up :root CSS variables?▼

Tailwind utilities fail to pick up :root CSS variables when they are not bridged through the @theme inline block, preventing the framework from recognizing and applying the runtime design tokens.

Related Skills

Explore More Design & Creative Skills→
ManuelvillarvieitesManuelvillarvieites

shadcn-ui-theme

Apply pre-configured shadcn/ui themes by replacing CSS variables in app/globals.css.

Community
Basic
theslashdojotheslashdojo

classes

Apply Tailwind utility classes to style HTML/JSX components with responsive variants.

Official
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced