如何使用 tailwind css 在标签中创建响应式文本

Question

今天我在我的密码标签中添加了一个文本，但是当我更改分辨率时文本不在同一个地方，请帮助我。我的代码：

     <div class="flex">
       <BreezeLabel for="password" value="Password" /> 
          <Link
            :href="route('password.request')"
            class="text-sm text-purple-600 hover:text-purple-800 ml-48"
          >
            Forgot your password?
          </Link>
       </div>

我的天哪，想看看情况：
fullsize
md
sm

Answer 1

我不知道 Breeze 是如何工作的。

但我认为您可以使用 flex 对您有利。

如果你想让 link 总是在右边，你可以使用这样的东西，

<div class="flex justify-between">
  <BreezeLabel for="password" value="Password" /> 
  <Link
    :href="route('password.request')" 
    class="text-sm text-purple-600 hover:text-purple-800"
  >Forgot your password?</Link>
</div>

如果这是您需要的，您可以在这里查看：https://play.tailwindcss.com/CXsdrXwDDq。

如何使用 tailwind css 在标签中创建响应式文本

How to do a responsive text in label with tailwind css

css

tailwind-css

laravel-breeze