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

Ready to run

npx skills add https://github.com/dtyq/magic --skill antd-style-to-tailwind

💬 Prompt for ChatGPT / Claude Chat▼

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.