尾翼:动画-旋转没有出现

Question

我想包括一个从顺风-css加载旋转器，并根据尾风文件，这应该是可用的className=“动画自旋”。

我正在使用从Vite创建的React18。除了尾翼，我还安装了台石雨。

当我应用“动画自旋”并在浏览器中进行检查时，我可以看到当我选择旋转器时，它已经被添加了。它肯定在那里，在我的按钮元素中旋转，但出于某种原因，它只是不显示/是透明的。

这是我的代码：

<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
                                <button
                                    type="submit"
                                    className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                                >
                                    <svg className="animate-spin h-5 w-5 mr-3"></svg>
                                    Loading...
                                </button>
                            </div>

`

我试着从按钮className中取出“边界透明”，但仍然没有显示出来。

感谢任何认识泰尔风的人的帮助。除了顺风导入和应用通用字体之外，我的App.css和index.css都是空白的。

我尝试用旋转器调整svg元素的颜色和背景色属性。到目前为止，只有背景颜色的白色使它显示出来，但只是作为一个旋转的广场。

我尝试过将文本-白色调整为svg元素，但是它没有显示，更改颜色属性也不会显示出来。

Answer 1

这里的问题在于您的svg图标中没有任何内容，而不是裁剪器。

您可以将svg更改为div元素并将其设置为背景色，然后动画自旋应正确工作。