英文:
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);">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论