Tailwind CSS的justify-between属性失效问题求助

安全阿岳

2026-6-15

问题：Tailwind CSS的justify-between属性不生效，但justify-center/start/end正常

我写的代码里，justify-between 属性无法生效，但 justify-center、justify-start 和 justify-end 都能正常工作。相关代码如下：

import { Container } from 'postcss'
import React from 'react'

export default function Navbar() {
  return (
    <>
    <nav className='w-full flex justify-between'>
      <div>
        asdsad
      </div>
      <div>
        asdsad
      </div>
      <div>
        asdsad
      </div>
    </nav>
    </>
  )
}

Tailwind配置文件

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
      },
    },
  },
  plugins: [],
} satisfies Config;

全局CSS文件

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

该项目托管于GitHub仓库 loracassi。

解决方案

移除无用导入：代码里的 import { Container } from 'postcss' 完全无关，直接删除这行，避免编译干扰。
修正Tailwind内容路径：你的配置里只监听了 .tsx 文件，但Navbar是 .jsx，需要把 .jsx 也加入content列表：
```
content: ["./src/**/*.tsx", "./src/**/*.jsx"],
```
确保容器宽度有效：w-full 依赖父元素宽度，若父元素没有明确宽度，换成 w-screen 强制占满视口宽度试试：
```
<nav className='w-screen flex justify-between'>
```
清除缓存重启服务：Tailwind缓存可能导致样式不更新，重启开发服务并清除浏览器缓存，或重新构建项目。
排查冲突样式：检查是否有其他全局样式或组件样式覆盖了flex布局，比如子元素设置了 flex-grow、固定宽度或者定位属性，导致 justify-between 的空间分配逻辑被破坏。