skills.rest
kiva
kivaOFFICIAL
Explore all skills by this author →
Website𝕏@KivaGitHub

kiva-tailwind

Configure and review Tailwind CSS v3 utilities using the @kiva/kv-tokens preset.

4|Updated Apr 8, 2021
Search Tags:#frontend#css#tailwind#ui-components#design-tokens#utility-classes#kiva-preset
One-click install
npx skills add https://github.com/kiva/kv-ui-elements --skill kiva-tailwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kiva-tailwind
Source: https://github.com/kiva/kv-ui-elements/tree/main/%40kiva/kv-skills/design-to-code/skills/kiva-tailwind-css
Command: npx skills add https://github.com/kiva/kv-ui-elements --skill kiva-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and common errors that come with using Kiva's custom Tailwind CSS v3 preset, which deviates significantly from stock Tailwind in utility prefixes, color systems, spacing scales, and available utilities, preventing broken or inconsistent UI styling across Kiva products.

Core Features & Use Cases

  • Preset Usage Guidance: Explains how to install, register, and configure the @kiva/kv-tokens Tailwind preset in new or existing projects, including setting up content globs and safelists for dynamically generated classes.
  • Authoring Rule Reference: Details all custom preset behaviors including the required tw- utility prefix, themable runtime-resolved semantic colors, 8px-based token-driven spacing scale, semantic text styles (no stock font-size/line-height utilities), limited font weight and border-radius scales, and custom breakpoint/z-index/shadow/opacity scales.
  • Troubleshooting & Internal Build Docs: Covers common mistakes like missing prefixes, using stock Tailwind color names, and incorrect spacing values, plus explains the design-token to Tailwind compilation pipeline for contributors modifying the monorepo's token or config files.
  • Use Case: When building or reviewing UI components for Kiva's component library or consumer applications, use this Skill to ensure all Tailwind utilities align with the Kiva design system and avoid styling regressions.

Quick Start

Consult the kiva-tailwind skill to confirm the correct tw- prefixed utility class and token value when implementing a new UI component in a Kiva project that uses the @kiva/kv-tokens preset.

Frequently Asked Questions about kiva-tailwind

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

FAQPage Schema
Why are my Tailwind CSS utility classes not working in a Kiva project?▼

Tailwind utility classes in Kiva projects require a custom tw- prefix to function correctly. Omitting this prefix or using stock Tailwind color names causes broken or inconsistent UI styling across Kiva consumer applications.

How do I use semantic colors with the Kiva Tailwind preset?▼

The Kiva Tailwind preset uses a themable runtime-resolved semantic color system instead of stock Tailwind color names. You must apply the custom tw- prefixed utility classes mapped to design tokens to ensure styles resolve correctly at runtime.

Can I use standard Tailwind spacing and typography utilities in Kiva components?▼

Standard Tailwind spacing and typography utilities are replaced in Kiva's preset by an 8px-based token-driven spacing scale and semantic text styles. Using stock font-size, line-height, or default spacing values will result in design system misalignment.

How do I install and configure the Kiva Tailwind CSS preset?▼

You configure the Kiva Tailwind preset by registering the @kiva/kv-tokens preset in your Tailwind config and setting up content globs and safelists for dynamically generated classes to ensure proper compilation.

What Tailwind core plugins are disabled in the Kiva design system preset?▼

The Kiva Tailwind preset disables specific stock core plugins and enforces limited font weight and border-radius scales. You must use the custom breakpoint, z-index, shadow, and opacity scales provided by the design-token compilation pipeline.

How does the design-token to Tailwind compilation pipeline work for contributors?▼

Contributors modifying the monorepo's token or config files use a compilation pipeline that transforms design tokens into Tailwind utility classes. This pipeline generates the custom tw- prefixed utilities and semantic scales used across kv-components and kiva/ui workspaces.

Related Skills

Explore More Software Engineering Skills→
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
KimenzoKimenzo

tailwind-best-practices

Enforce Tailwind CSS design system rules for Mastra Playground UI components.

Community
Intermediate
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
iliaaliliaal
30

ia-tailwind-css

Apply Tailwind CSS v4 CSS-first configuration and correct class patterns.

Community
Intermediate