skills.rest
AvaloniaUI
AvaloniaUIOFFICIAL
Explore all skills by this author →
Website𝕏@AvaloniaUIGitHub

tailwind-to-infima

Translate Tailwind utilities into Infima variables for Docusaurus styling.

157|301|Updated Apr 24, 2023
Search Tags:#theming#migration#tailwind#docusaurus#design-tokens#css-mapping#infima
One-click install
npx skills add https://github.com/AvaloniaUI/avalonia-docs --skill tailwind-to-infima
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-to-infima
Source: https://github.com/AvaloniaUI/avalonia-docs/tree/main/.claude/skills/tailwind-to-infima
Command: npx skills add https://github.com/AvaloniaUI/avalonia-docs --skill tailwind-to-infima

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrates design systems from Tailwind utilities to Infima-based styling for Docusaurus sites, enabling consistent theming with semantic tokens.

Core Features & Use Cases

  • Maps common Tailwind utilities to Infima equivalents and updates to src/styles/custom.scss with Infima variables.
  • Generates a migration plan for Docusaurus sites, covering color tokens, spacing scales, and typography adjustments.
  • Use Case: Migrating a Tailwind-based site to Infima-driven UI across pages, components, and navigation.

Quick Start

Provide your Tailwind config and a sample component; I will output the Infima-ready styling plan and necessary CSS overrides.

Frequently Asked Questions about tailwind-to-infima

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

FAQPage Schema
How do I migrate Tailwind utilities to Infima styling for a Docusaurus site?▼

To migrate Tailwind utilities to Infima styling, provide your Tailwind config and a sample component to generate an Infima-ready styling plan with necessary CSS overrides for your Docusaurus site.

Can I map Tailwind design tokens directly to Docusaurus Infima variables?▼

Yes, mapping Tailwind design tokens to Infima variables translates color, spacing, and typography configurations into semantic tokens within src/styles/custom.scss for consistent Docusaurus theming.

What is the best way to convert a Tailwind config into Infima-ready CSS?▼

Converting a Tailwind config into Infima-ready CSS involves translating utility classes into Infima variables and updating custom.scss. This ensures semantic design tokens drive consistent UI styling across pages, components, and navigation.

Does Docusaurus support Tailwind CSS natively, or do I need to migrate to Infima?▼

Docusaurus uses Infima as its native styling framework. While Tailwind CSS can be integrated manually, migrating to Infima using semantic tokens ensures native compatibility across pages, components, and navigation layouts.

What do I need to provide for a Tailwind to Infima migration plan?▼

You need to provide your Tailwind config and a sample component. This generates the necessary Infima-ready styling plan and CSS overrides for your Docusaurus site.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
AvaloniaUIAvaloniaUI
157

docusaurus-styling

Align Docusaurus visuals with the Avalonia Customer Portal theme using TailwindCSS and CSS variables.

Official
Intermediate
cloudpossecloudposse
98

docs-build

Automate Cloud Posse documentation builds, renders, and deployments with Docusaurus.

Official
Advanced
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced