图片不能在顺风CSS中调整大小

Question

我一直在用顺风CSS做Astro JS。当我试图改变宽度和高度提供似乎没有改变宽度和高度。

<div>
<Navbar></Navbar>
<img class="ml-auto w-108" src={bgimg} alt="Stop">
<div class="absolute top-0 left-0 flex flex-col items-start pl-10 pt-10">
<h1 class="text-5xl font-bold text-black mt-56 ml-10">Title</h1>
<h1 class="text-5xl font-bold text-black mt-5 ml-10 text-orange">"Sub para"</h1>
</div>
</div>

还看到在项目上没有img标签的样式。上面的代码是在landing.astro文件中，它在index.astro文件中发布。但是另一个图像文件可以用这个代码调整<img class="w-20 h-20" src={logo} alt="Logo">的大小。

Answer 1

如果您想创建所需的宽度，只需写入w-[108px]并将值写入[width]内。最后，Tailwind编译器完成这项工作，并创建宽度为108像素的所需类。

<div>
<Navbar></Navbar>
<img class="ml-auto w-[108px]" src={bgimg} alt="Stop">
<div class="absolute top-0 left-0 flex flex-col items-start pl-10 pt-10">
<h1 class="text-5xl font-bold text-black mt-56 ml-10">Title</h1>
<h1 class="text-5xl font-bold text-black mt-5 ml-10 text-orange">"Sub para"</h1>
</div>
</div>

Answer 2

类w-108不是包含在Tailwind中的类，所有间距的最大默认值是96。您可以将108作为自定义大小添加到您的顺风配置中，或者使用任意值。

https://tailwindcss.com/docs/width