Tailwind中hidden属性失效及垂直对齐问题求助

问题1：hidden 属性切换后无法正常显示 #

• invisible 通过 visibility: hidden 隐藏元素，会保留布局空间；hidden 对应 display: none，元素完全脱离布局。
• 你遇到的切换后不显示问题，核心是类名切换逻辑错误——直接给元素添加hidden类后，没有正确移除它来恢复显示。
• 修正方式：用类名切换方法控制，比如原生JS中使用classList.toggle()：

  // 假设切换按钮ID为toggleBtn，目标元素ID为targetEl
  document.getElementById('toggleBtn').addEventListener('click', () => {
    const el = document.getElementById('targetEl');
    el.classList.toggle('hidden');
  });
  

• 若需要在invisible和hidden之间切换，需先判断当前类名再做增删：

  document.getElementById('toggleBtn').addEventListener('click', () => {
    const el = document.getElementById('targetEl');
    if (el.classList.contains('invisible')) {
      el.classList.remove('invisible');
      el.classList.add('hidden');
    } else {
      el.classList.remove('hidden');
      el.classList.add('invisible');
    }
  });
  

问题2：垂直对齐设置不生效 #

Tailwind的align-*系列类（如align-middle）仅对行内元素、行内块元素、表格单元格生效。如果是块级元素，需要用flex/grid布局实现垂直对齐：

• 方案1：Flex布局实现子元素垂直居中（最常用）
  给父元素添加flex items-center，同时设置父元素高度（比如h-24），子元素会自动垂直居中：

  <div class="flex items-center h-24 bg-gray-100">
    <p class="text-xl">垂直居中的文本</p>
  </div>
  

• 方案2：行内元素（如按钮内图标和文字）直接加align-middle：

  <button class="flex items-center gap-2">
    <svg class="w-5 h-5 align-middle" viewBox="0 0 20 20">...</svg>
    <span class="align-middle">按钮文字</span>
  </button>
  

内容的提问来源于stack exchange，提问作者Shekhar lohach