Tailwind css中的固定宽度与flex中的其他元素不兼容。

Question

我需要将两列并排放置。其中一列具有固定宽度。我真的很努力地想理解为什么Tailwind CSS flexbox中一个列的固定宽度不起作用。

我有以下代码：

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-16 h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>

Tailwind 版本：3.0.23

输出：

检查元素：

预期输出：

- Siddiqui Noor

---

您可以在具有固定宽度的元素中添加 'flex-shrink-0'。 - Ihar Aliakseyenka

@IharAliakseyenka，你救了我的一天。你能否把它作为答案发布，这样我就可以接受它，以供未来读者，甚至是我自己 :) - Siddiqui Noor

Answer 1

实际上，在响应式设计中，如果没有明确指定，使用 flex 会自动收缩。

请参考 Tailwind 的 flex-shrink 文档：https://tailwindcss.com/docs/flex-shrink

文档建议使用 flex-shrink-0 CSS 属性即 shrink-0 类来避免宽度因可变宽度尺寸而收缩。

代码应如下所示：

<div className="flex flex-row justify-between items-start">
      <p className="mt-4 h-14  overflow-hidden leading-7">
        This title pushed back the next element and this is the long text to
        check the overflow of the text and lets see if this actually works
      </p>
      <div className="p-1 w-16 h-16 text-white text-center shrink-0 bg-purple-500">
        <p class="text-sm">JUN</p>
        <p class="text-3xl leading-none font-bold">05</p>
      </div>

输出结果如下：

- BouncyBits

---

请注意，“flex-shrink-0”仅适用于Tailwind v2，“shrink-0”是Tailwind版本3中更新的类。 - saboshi69

是的，类名为“shrink-0”，它会被转换成CSS属性“flex-shrink-0”。 - Agni Gari

Answer 2

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 w-[70%] overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-[15%] h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>
Maybe like this work

- Hazrat Gafulov

---

我需要右侧部分的实际宽度，因为在响应式视图中，百分比会有不同的作用，所以这种方法在我的情况下不适用。 - Siddiqui Noor

Answer 3

在这里，您可以简单地使用flex属性，同时保持宽度不变。

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-between items-start ">
    <div>
    <p class="py-2 px-2 h-14 overflow-hidden leading-6">This title pushed back the next element
       his title pushed back the next element.</p>
    </div>
    <div class="px-2 w-16 h-16 mr-2 text-white bg-purple-500 text-center">
        <p class="text-sm">June</p>
        <p class="text-3xl leading-none font-bold">05</p>
    </div>
</div>

- MagnusEffect

Answer 4

在我的情况下，一些规则是有效的，但是一些带有前缀的规则，例如lg:flex和lg:w-72没有被识别出来。我的问题是我使用新的应用程序路由器重新组织了代码，但忘记更新我的tailwind.config.js以包含该路径。

我进行了更改：

  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

转换为：

  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

它起作用了！

- Brandon Johnson