Standardize Ant Design customization with Tailwind CSS layer ordering and scoped overrides.
npx skills add https://github.com/pure-golang/level85 --skill x-antd
Please help me install this Agent Skill. Skill: x-antd Source: https://github.com/pure-golang/level85/tree/main/.agents/skills/x-antd Command: npx skills add https://github.com/pure-golang/level85 --skill x-antd
Этот навык помогает стандартизировать и безопасно кастомизировать Ant Design в связке с Tailwind CSS, чтобы не разъезжались стили, а внутренние .ant-* переопределялись предсказуемо и без глобальных побочных эффектов.
theme, base, antd, components, utilities) и корректные @import в нужных layer’ах.rootClassName/project root scope для селекторов .ant-*, чтобы кастомизация была точечной и не ломала другие места.ConfigProvider.theme и ограничивает ConfigProvider.theme.components, чтобы кастомизация оставалась управляемой и совместимой.Применяй x-antd, когда подключаешь или обновляешь AntD во frontend и настраиваешь стили через frontend/src/styles.css, используя Tailwind слои и scoped rootClassName для любых внутренних .ant-* переопределений.
High-intent search queries and answers about installing and using this skill.
To safely override Ant Design styles with Tailwind CSS, enforce scoped CSS overrides using `rootClassName` or project root scope for `.ant-*` selectors. This prevents global side effects and ensures component customizations remain predictable and isolated.
The correct CSS layer ordering for AntD and Tailwind v4 defines a specific framework: `theme`, `base`, `antd`, `components`, and `utilities`. You must apply correct `@import` statements within these layers to maintain strict style boundary control and predictable cascading.
Ant Design theming breaks during Tailwind v4 updates because incorrect layer ordering causes style conflicts. The x-antd approach fixes this by standardizing imports across defined layers and prohibiting global `.ant-*` rules, ensuring internal DOM and overlays remain compatible.
ConfigProvider theme tokens for brand customization are prohibited in this setup to maintain governed theming boundaries. You should restrict `ConfigProvider.theme.components` and rely on scoped CSS overrides instead of injecting brand tokens directly into the global theme configuration.
Yes, you need AntD v6 and Tailwind CSS v4 to implement this scoped component styling standard. The setup requires layer-based imports and scoped `rootClassName` overrides to correctly handle internal `.ant-*` DOM elements, overlays, and theme boundaries.
wilsonfaustinoMigrate antdV3 imports to antd v6 with Playwright screenshot verification.
belos-streetGuide Ant Design Vue component integration in Vue 3 applications.
messebEstablish centralized design tokens and enforce scoped CSS styling strategies.
AhChaoEnforce Mantine v8 styling and CSS modules in React TSX components.