TailwindCSS样式在Chakra UI Modal内组件不生效的问题求助

Chakra UI的Modal组件默认会通过Portal将内容挂载到document.body节点下，而非你设置的#app容器内部。你在tailwind.config中配置的important: '#app'，仅会让Tailwind样式对#app容器内的元素提升优先级。由于Modal内的元素不在#app范围内，自定义Tailwind样式优先级低于Chakra UI的内置样式，因此被覆盖无法生效。

方案1：将Modal挂载到#app容器内 #

通过containerRef属性指定Modal的挂载目标为#app，让Modal内元素被包含在#app中，使important: '#app'配置生效：

import { useRef } from 'react';
import { Modal, ModalContent, Heading, Input } from '@chakra-ui/react';

function CustomModal() {
  const appContainer = useRef(document.getElementById('app'));

  return (
    <Modal containerRef={appContainer}>
      <ModalContent>
        <Heading className='mb-2 font-medium text-base text-grey'>Email</Heading>
        <Input
          placeholder='Enter your Full Name'
          className='font-medium focus:outline-none text-textGrey focus:text-activeText'
        />
      </ModalContent>
    </Modal>
  );
}

方案2：调整Tailwind的important范围 #

若不想修改Modal挂载目标，可将important范围扩大到body（Modal默认挂载到body），让Tailwind样式全局具备更高优先级：

// tailwind.config.js
module.exports = {
  important: 'body',
  // 其他原有配置
}

注意：该方式可能引发全局样式冲突，需自行评估风险。

方案3：使用Chakra UI原生样式方案替代Tailwind #

直接借助Chakra UI的内置样式属性（组件props、sx）定义样式，规避优先级冲突：

<Heading mb={2} fontSize="base" fontWeight="medium" color="grey">
  Email
</Heading>
<Input
  placeholder='Enter your Full Name'
  fontWeight="medium"
  color="textGrey"
  _focus={{
    color: 'activeText',
    outline: 'none',
    borderColor: 'transparent'
  }}
/>

内容的提问来源于stack exchange，提问作者Kundan Agrawal