Vue/Tailwind 中的浮动标签

Question

我希望为输入表单字段找到一个浮动标签，将标签放在边框中，以便在我的 Tailwind CSS/Vue 项目中使用。我查看了几个选项：

1. https://csslayout.io/patterns/floating-label/ 仅使用 CSS。它在 Tailwind 之外工作得很好，但是当我导入 Tailwind 时它停止工作（我安装了 Tailwind/Forms 插件，但这似乎并没有解决它）。添加 Tailwind 后，我什至无法键入文本框。这是为什么呢？

2. https://notiz.dev/blog/floating-form-field-with-tailwindcss 更复杂，但我让它工作，直到我把它放在一个具有背景颜色的 div 中，然后占位符消失。

有人有什么建议吗？我是 Tailwind 的初学者，所以我猜我只是不知道一些可以让事情顺利进行的基本知识。

Answer 1

我想我找到了我遇到的问题。第一个示例需要在输入元素中指定 type=text。它还需要将文本颜色设置为文本黑色。我猜我在第二个示例中遇到的问题也将通过设置文本颜色来解决。谢谢。