skills.rest
dtyq
dtyqOFFICIAL
Explore all skills by this author →
GitHub

antd-style-to-tailwind

Translate Ant Design CSS-in-JS patterns to Tailwind utilities.

5.0k|548|Updated May 14, 2025
Search Tags:#tailwind#migrate#migration-guide#dark-mode#frontend-design#css-in-js#antd
One-click install
npx skills add https://github.com/dtyq/magic --skill antd-style-to-tailwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antd-style-to-tailwind
Source: https://github.com/dtyq/magic/tree/main/frontend/magic-web/.agents/skills/antd-style-to-tailwind
Command: npx skills add https://github.com/dtyq/magic --skill antd-style-to-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrate Ant Design styles from CSS-in-JS patterns (createStyles) to Tailwind utility classes to ensure consistent styling, easier theming, and reliable dark-mode support across a codebase.

Core Features & Use Cases

  • Audit and identify Ant Design style definitions in styles.ts and createStyles usage.
  • Translate CSS properties and Ant Design tokens into Tailwind utilities, mapping tokens to semantic equivalents and preserving layout behavior.
  • Replace Ant Design components and patterns (Button, Input, layout primitives) with Tailwind-based equivalents, including import changes and className updates.
  • Use cases include migrating legacy components, upgrading design systems, or scaffolding new components in files that currently use antd-style patterns.

Quick Start

Identify a component using createStyles and migrate its styles to Tailwind following this guide.

Frequently Asked Questions about antd-style-to-tailwind

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

FAQPage Schema
How do I migrate Ant Design styles from createStyles to Tailwind CSS?▼

To migrate Ant Design styles to Tailwind, audit createStyles usage in styles.ts, translate CSS properties and antd tokens into semantic Tailwind utilities, replace components, update imports, and verify dark-mode compatibility.

What is the best way to convert Ant Design tokens to Tailwind utilities?▼

The best way to convert Ant Design tokens to Tailwind utilities is by mapping them to semantic equivalents within Tailwind, ensuring layout behavior is preserved while replacing CSS-in-JS patterns with utility classes.

Does migrating antd-style to Tailwind support dark-mode functionality?▼

Yes, migrating antd-style to Tailwind supports dark-mode functionality by replacing CSS-in-JS patterns with Tailwind utility classes, which enables reliable and consistent dark-mode theming across the codebase.

How do I replace Ant Design Button and Input components with Tailwind equivalents?▼

Replacing Ant Design Button and Input components with Tailwind equivalents requires updating imports to remove antd-style dependencies and applying translated Tailwind utility classes directly to className attributes.

What are the limitations of migrating createStyles patterns to Tailwind?▼

Limitations of migrating createStyles patterns to Tailwind include the need to manually verify accessibility and dark-mode compatibility after replacing dynamic CSS-in-JS styling with static utility classes across all affected components.

Related Skills

Explore More Software Engineering Skills→
EzequielpereyraaEzequielpereyraa

design-init

Scan Tailwind and CSS projects to extract design tokens and generate DESIGN.md.

Community
Advanced
AincFhAincFh

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind utilities into React apps.

Community
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
whimzyLivewhimzyLive
3

tailwind-design-system

Configure Tailwind CSS v4 themes with CSS variables and dark mode.

Community
Advanced