如何在Tailwind CSS中运用.class > *选择器设置子元素宽度？

纯Tailwind实现（无需额外原生CSS） #

Tailwind的任意变体和自定义值可以直接实现这个需求，不用写单独的CSS文件：

• 直接给父元素添加 [&>*]:w-[calc(100%/3)] 类，就能让它的所有直接子元素宽度设为 calc(100%/3)。
  示例代码：

<div class="[&>*]:w-[calc(100%/3)]">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

这里的 [&>*] 是Tailwind的任意变体语法，对应CSS中的 .parent > * 选择器；w-[calc(100%/3)] 是自定义宽度的任意值写法。

如果需要重复使用这个样式，推荐在 tailwind.config.js 里定义自定义工具类，方便全局复用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      utilities: {
        'child-third-width': {
          '& > *': {
            width: 'calc(100% / 3)',
          },
        },
      },
    },
  },
  plugins: [],
}

之后在HTML里直接用 child-third-width 类即可：

<div class="child-third-width">
  <div>子元素1</div>
</div>

混合原生CSS（适合复杂样式场景） #

如果更习惯用原生CSS管理特定样式，直接在项目的全局CSS文件中添加规则，同时保留Tailwind的其他类：

/* 示例：global.css */
.child-third > * {
  width: calc(100% / 3);
}

HTML中同时使用Tailwind类和自定义类：

<div class="flex gap-4 child-third">
  <div>子元素1</div>
  <div>子元素2</div>
</div>

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