Migrate existing antd-style CSS-in-JS (createStyles) components to Tailwind CSS utility classes with full dark mode support, following the project's style system transition strategy. Use when the user asks to migrate, convert, or rewrite antd-style components to Tailwind, or when working on new components in files that already use antd-style.
Migrate existing antd-style CSS-in-JS (createStyles) components to Tailwind CSS utility classes with full dark mode support, following the project's style system transition strategy. Use when the user asks to migrate, convert, or rewrite antd-style components to Tailwind, or when working on new components in files that already use antd-style.
antd-style → Tailwind CSS Migration
When to apply
User asks to migrate / rewrite / convert a component's styles to Tailwind
A new feature is being built in a file that currently uses createStyles
User references styles.ts, createStyle, useXxxStyles, or cx()
Component contains antd Button — replace with shadcn Button during migration
Prerequisites
Always read these files before starting:
The target component (index.tsx or equivalent)
Its styles.ts
tailwind.config.js and src/index.css if token mapping is unclear
Migration Steps
1. Audit the styles.ts
Identify:
Styles used only by this component → remove from styles.ts
Styles shared with other components → keep createStyles for those
Also check if the styles file is imported anywhere else before deleting:
Every ancestor from panel body to ScrollArea must provide a calculable height
Typical safe chain: flex-1 min-h-0 overflow-hidden on parent + min-h-0 h-full on ScrollArea
Avoid wrapping ScrollArea with components that add an extra auto-height layer (for example spinner wrappers) unless that wrapper and its direct child are both h-full
If loading overlay breaks scrolling, prefer rendering loading as a branch:
Keep existing data-testid values on list / loading / empty nodes when replacing containers.
11. Replace antd Button with shadcn Button
When migrating a component that uses antd Button, replace it with shadcn Button from
@/opensource/components/shadcn-ui.
Import change
- import { Button } from "antd"+ import { Button } from "@/opensource/components/shadcn-ui"
antd → shadcn mapping
antd Button
shadcn Button
type="primary"
variant="default" (or omit, default)
type="default"
variant="outline" or variant="secondary"
type="text"
variant="ghost"
type="link"
variant="link"
danger
variant="destructive"
size="large"
size="lg"
size="small"
size="sm"
icon={<Icon />}
Put icon as child: <Button><Icon /> Text</Button>
loading
Use disabled + loading spinner as child, or a loading state component
Example migration
- import { Button } from "antd"- import { IconDownload } from "@tabler/icons-react"+ import { Button } from "@/opensource/components/shadcn-ui"+ import { IconDownload } from "@tabler/icons-react" // or lucide-react- <Button type="primary" icon={<IconDownload size={20} />} onClick={handleDownload}>- {t("detail.downloadFile")}- </Button>+ <Button onClick={handleDownload} size="sm">+ <IconDownload className="size-5" />+ {t("detail.downloadFile")}+ </Button>
shadcn Button has built-in [&_svg]:size-4; use className="size-5" on the icon for 20px.
Remove any className overrides that were needed for antd — shadcn Button uses Tailwind and
supports className for minor tweaks only.
11.5 Replace antd Input with shadcn Input
When migrating a component that uses antd Input, replace it with shadcn Input from
@/opensource/components/shadcn-ui/input.
Import change
- import { Input } from "antd"+ import { Input } from "@/opensource/components/shadcn-ui/input"
Prefix icon migration
Antd prefix prop is not used in shadcn Input. Wrap Input with a relative container and render
the icon absolutely:
Use fixed width wrapper only when desktop layout needs it (for example w-[240px])
12. Antd component overrides (non-Button)
When applying Tailwind to other antd components (Dropdown, Modal, etc.), antd's CSS
specificity requires !important for most visual properties. Layout utilities like flex-none
do NOT need ! since they're additive.
Workspace rule (critical): for internal antd class overrides, use .magic-* prefix,
not .ant-*.
Rule of thumb for !: Does antd set this property by default? If yes → !. If it's purely
additive (flex-none, mt-2.5, self-end) → no ! needed.
13. Interactive states (hover / active / focus / disabled)
Always add all four states when styling interactive elements. Missing any state causes visible
regressions (e.g., a button that darkens on hover but ignores keyboard focus).
Toggle dark mode in the app and visually inspect the migrated component.
Check: backgrounds, text contrast, borders, shadows, focus rings.
Ensure no "invisible" text or low-contrast elements in dark mode.
Search pattern for audit
# Find light-only color classes — verify each has a dark: variant in same className
rg "bg-(white|gray-50|orange-50|green-50|blue-50|amber-50)" --type tsx path/to/component
rg "text-(gray-[34]00|orange-500|green-500|blue-500)" --type tsx path/to/component
React patterns to fix during migration
Prefer proper types over eslint-disable / as any
When passing props to child components, fix type errors by using proper interfaces instead of
as any or eslint-disable-next-line @typescript-eslint/no-explicit-any.
Export the child's props interface from the child component:
Remove type assertions — spread directly without as any:
- <PlaybackTabContent {...(playbackProps as any)} />+ <PlaybackTabContent {...playbackProps} />
Simplify property access — no cast needed:
- (playbackProps as Record<string, unknown>)?.isFullscreen === true+ playbackProps?.isFullscreen === true
Reserve eslint-disable only for cases where proper typing is impractical (e.g. MobX store data
with loose typing in .map() callbacks). Prefer exporting interfaces and typing props correctly.
Object initializer in deps causes stale closure warnings
The pattern const x = thing || {} creates a new object reference every render, causing
ESLint to warn about unstable useCallback/useMemo deps. Wrap it in useMemo:
@ts-ignore — suppresses the error silently; ESLint bans it.
@ts-expect-error — requires a real error to exist; errors if the line is clean.
Migration rule:
Replace // @ts-ignore with // @ts-expect-error and add a brief reason.
Run lint. If you get "Unused '@ts-expect-error' directive" → the line is already clean, just
delete the comment entirely.
- // @ts-ignore+ // @ts-expect-error - result type does not expose data.file_id
const fileId = result?.data?.file_id || result?.currentFileId
any on JSX .map() callbacks over store data (last resort)
When iterating over data from a MobX/Zustand store with loose typing, first try to add proper
types (e.g. define StoreItem interface, use as StoreItem where the parent builds the data).
Use eslint-disable only when proper typing is impractical (e.g. store shape is dynamic or
external).
⚠️ The eslint-disable-next-line comment must be on the line immediately before the
{items?.map( expression — not before the wrapping {condition && ( wrapper.
Shared base class pattern
When multiple elements share the same base styles, extract into a const outside the component:
All styles.xxx references replaced with Tailwind classes
useXxxStyles import and call removed from component
createStyles export removed from styles.ts (if no other consumers)
keyframes import removed from styles.ts if unused
styles.ts file deleted after confirming no other imports
cn() imported from @/opensource/lib/utils
No className + concatenation; use cn(...) instead
antd Button replaced with shadcn Button from @/opensource/components/shadcn-ui
antd Input replaced with shadcn Input from @/opensource/components/shadcn-ui/input
If MagicScrollBar was replaced, ScrollArea uses viewportClassName and height-chain (min-h-0 + h/full) is verified
Dark mode verification: All hardcoded light colors have dark: variants; prefer semantic tokens (bg-background, text-foreground, etc.); manually verify in dark mode
antd layout components (Flex, Space, Row, Col) replaced with div + Tailwind
Unused antd imports removed after replacement
Interactive elements have all four states: hover: / active: / focus-visible: / disabled:
Repeated button/link classes extracted to a module-level const (DRY)
token.borderRadiusSM translated to rounded-[4px], not rounded-sm
Object initializers used as hook deps wrapped in useMemo
@ts-ignore replaced with @ts-expect-error + reason, or deleted if no error exists
Type safety: Props passed to children use proper interfaces (export from child, use in parent); avoid as any and eslint-disable for type errors
any in JSX map callbacks used only as last resort; prefer proper types when feasible
! prefix on antd overrides applied correctly (visual props only, not layout utilities)
Antd override selectors use .magic-* class prefix, not .ant-*
