Tailwind @apply转换Flexbox样式失效问题求助

核心问题分析 #

1. Tailwind类名错误：你误用了align-middle类，它是用于表格单元格/行内元素的垂直对齐，并非flex容器align-items: center对应的工具类——正确的类应该是items-center。这也是直接替换工具类后布局仍失效的原因。
2. @apply执行环境错误：内联<style>标签中的@apply不会被PostCSS处理，Tailwind无法解析该指令，导致自定义.box类没有生成对应的样式。

解决方案 #

方案1：修正类名并直接使用Tailwind工具类 #

将错误的align-middle替换为items-center，直接在元素上使用工具类即可实现目标布局：

<main class="main">
  <div class="flex w-full flex-auto flex-col items-center justify-center">
    <div class="container flex-auto px-4 py-8 min-h-screen flex flex-col sm:flex-row items-center justify-center">
      <div class="bg-red-400 basis-1/4 h-64 flex items-center justify-center">02</div>
      <div class="bg-green-400 basis-1/4 h-64 flex items-center justify-center">02</div>
    </div>
  </div>
</main>

方案2：正确使用@apply自定义类 #

1. 在项目中创建单独的CSS文件（如custom-styles.css），并在其中通过@layer定义自定义组件类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .box {
    @apply flex items-center justify-center;
  }
}

2. 确保该文件被纳入Tailwind的编译流程（在React项目中可直接在入口文件引入，或配置到PostCSS的编译列表），最终生成的output.css会包含.box类的样式。
3. 保持HTML结构不变即可生效：

<main class="main">
  <div class="flex w-full flex-auto flex-col box">
    <div class="container flex-auto px-4 py-8 min-h-screen flex flex-col sm:flex-row box">
      <div class="bg-red-400 basis-1/4 box h-64">02</div>
      <div class="bg-green-400 basis-1/4 box h-64">02</div>
    </div>
  </div>
</main>

额外注意事项 #

• 检查tailwind.config.js的content配置，确保项目的HTML/JSX文件路径被正确收录，Tailwind才能正常扫描并生成所需样式。
• 若存在样式优先级冲突，可在自定义类中添加!important（如@apply flex items-center justify-center !important;），但不建议过度使用。

内容的提问来源于stack exchange，提问作者Dean Hiller