英文:
Background color doesnt apply with Tailwind but work with inline style
问题
这不太确定我在这里做错了什么。如果我尝试通过Tailwind应用背景颜色，那么颜色不会应用，但如果我尝试通过内联样式来应用，那么它会生效（内联样式从Tailwind文档中复制）。
这不会应用背景颜色
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.tailwindcss.com"></script><title>Testing Tailwind</title></head><body class="h-screen"><div class="h-full"><div clas="h-full bg-rose-900"><h1 class="text-blue-900 text-center text-4xl">Boards</h1><p>Test</p></div></div></body></html>
这会应用背景颜色
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.tailwindcss.com"></script><title>Testing Tailwind</title></head><body class="h-screen"><div class="h-full"><div clas="h-full" style="background-color: rgb(136 19 55);"><h1 class="text-blue-900 text-center text-4xl">Boards</h1><p>Test</p></div></div></body></html>
我从Tailwind文档中取的背景颜色是bg-rose-900，对应的CSS属性是background-color: rgb(136 19 55)。希望有人可以指出我做错了什么的正确方向。
英文:
Not quite sure what I am doing wrong here. If I try to apply a background color via Tailwind then it doesn't apply the color but if I try to do it via inline style then it works (inline style copied from Tailwind documentation)
This does not apply the Background color
'''
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.tailwindcss.com"></script><title>Testing Tailwind</title></head><body class="h-screen"><div class="h-full"><div clas="h-full bg-rose-900"><h1 class="text-blue-900 text-center text-4xl">Boards</h1><p>Test</p></div></div></body></html>
'''
This does apply the background color
'''
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.tailwindcss.com"></script><title>Testing Tailwind</title></head><body class="h-screen"><div class="h-full"><div clas="h-full" style="background-color: rgb(136 19 55);"><h1 class="text-blue-900 text-center text-4xl">Boards</h1><p>Test</p></div></div></body></html>
'''
The background color I took from the Tailwind documentation
bg-rose-900 background-color: rgb(136 19 55);
https://tailwindcss.com/docs/background-color
Hoping someone can point me in the correct direction on what I am doing wrong.
答案1
得分: 0
将“clas”更正为“class”：
<div class="h-full" style="background-color: rgb(136 19 55);">
英文:
Typo of class as @Quentin pointed.
Change
<div clas="h-full" style="background-color: rgb(136 19 55);">
to
<div class="h-full" style="background-color: rgb(136 19 55);">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论