2 篇博文 含有标签「tailwind」

在 Tailwind 中经常会有一些奇怪的类名，比如 w-[calc(100vw_-_64px)]，这种类名是无法直接使用 document.querySelector 来选择的，需要进行一些处理，将类名的中 []、()、: 替换为 \\[\\]、\\(\\)、\\:，然后使用 document.querySelector 来选择。

className.replace(/([\[\]\(\):])/g, "\\$1")

参考 Ant Design 官网：样式兼容

Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 TailwindCSS 优先级冲突），你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

import { FC } from "react"

import { StyleProvider } from "@ant-design/cssinjs"

// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
const App: FC = () => (
    <StyleProvider hashPriority="high">
        <MyApp />
    </StyleProvider>
)

export default App

切换后，样式将从 :where 切换为类选择器：

:where(.css-bAMboO).ant-btn {
}

.css-bAMboO.ant-btn {
    color: #fff;
}