Tailwind CSS实现带文本圆形：Web新手开发者技术求助

嘿，作为刚接触Tailwind的新手，遇到这种样式问题太正常了！我来帮你梳理清楚问题所在，然后给出可行的解决方案：

问题分析 #

你的代码里有两个核心问题导致效果不符合预期：

1. 样式优先级冲突：你同时使用了Tailwind的bg-gray-400类和内联的style="background-color:red"，内联样式的优先级比Tailwind工具类更高，虽然最终红色背景会生效，但这种写法既冗余又不符合Tailwind的使用规范。
2. 缺少文字布局类：默认状态下div内的文字是左对齐且垂直不居中的，这和你参考的居中文字效果完全不符。

修正后的代码方案 #

我推荐你完全用Tailwind的工具类实现，这是Tailwind的最佳实践，能避免样式冲突还方便后续维护：

<div class="w-1/2 h-10 rounded-full bg-red-500 flex items-center justify-center text-white font-medium">404</div>

代码细节解释 #

• w-1/2 h-10：保留你原本设置的宽度（父元素的一半）和高度
• rounded-full：实现全圆角的容器效果
• bg-red-500：用Tailwind预设的红色替代内联样式，你可以根据需求换成bg-red-400/bg-red-600等不同深浅的红色
• flex items-center justify-center：让404文字在容器内垂直+水平居中，这是实现参考效果的关键
• text-white font-medium：设置文字为白色并增加字重，让文字更醒目

如果确实需要用内联样式设置背景色（不推荐，会破坏Tailwind的样式体系），可以去掉Tailwind的背景类，同时保留布局类：

<div class="w-1/2 h-10 rounded-full flex items-center justify-center text-white font-medium" style="background-color: red;">404</div>

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者trzew