如何为Tailwind CSS的flex类添加额外默认样式？

你当前的配置方式无法实现需求，theme.extend.flex这个配置项是用来定义自定义flex比例类（比如flex-1、flex-2这类控制伸缩比例的类）的，不是用来修改默认flex工具类样式的。

要给默认flex类添加额外样式，有两种常用方案：

方案一：直接重写默认flex类 #

在theme对象下直接定义flex的默认样式，替换原有flex类的行为：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    flex: {
      DEFAULT: 'flex items-center gap-1.5',
      // 保留原有的flex比例类，避免覆盖后失效
      1: 'flex-1',
    },
  },
  plugins: [],
};

• 这里的DEFAULT对应不带后缀的flex类，配置后使用flex时会同时应用display:flex、align-items:center、gap:6px（gap-1.5是Tailwind内置类，对应6px，符合Tailwind设计规范）。
• 必须保留原有的flex比例类（比如flex-1），否则这些类会因被覆盖而失效。

方案二：创建自定义复合类（不修改默认flex类） #

如果不想改变原有flex类的行为，可新增一个包含额外样式的复合类，在CSS文件中通过@layer utilities定义：

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

@layer utilities {
  .flex-gap {
    @apply flex items-center gap-1.5;
  }
}

之后在代码中使用flex-gap类即可替代原来的flex，实现你想要的样式组合，同时不影响原有flex类的正常使用。

内容的提问来源于stack exchange，提问作者ok i