英文:
Why inner element's style doesn't apply in tailwind?
问题
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="head.css">
</head>
<body>
<div class="grid grid-cols-10">
<div class="col-start-1 col-end-3 bg-slate-600 h-screen"></div>
<div class="col-span-8">
<div class="p-4 bg-slate-400 m-4 h-screen">
<div class="bg-yellow-100 m-4 ">Hello</div>
</div>
</div>
</div>
</body>
<!-- end snippet -->
I Need to add header in gray section but effect doesn't apply there! Yellow background doesn't appear, only text is shownImage with error
It works fine if in include
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- end snippet -->
but not with
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link rel="stylesheet" href="head.css">
<!-- end snippet -->
(using tailwind CLI)
答案1
得分: 1
你可能没有将Tailwind添加到你的项目中。上面的代码按预期工作。你只需在<head>中添加以下代码：
<script src="https://cdn.tailwindcss.com"></script>
请参考下面的代码片段：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-10">
<div class="col-start-1 col-end-3 bg-slate-600 h-screen"></div>
<div class="col-span-8">
<div class="p-4 bg-slate-400 m-4 h-screen">
<div class="bg-yellow-100 m-4 ">Hello</div>
</div>
</div>
</div>
</body>
</html>
希望这可以帮助你。
英文:
You probably didn't include Tailwind into your project. The code above works as expected. You just need to add <script src="https://cdn.tailwindcss.com"></script> inside <head>.
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-10">
<div class="col-start-1 col-end-3 bg-slate-600 h-screen"></div>
<div class="col-span-8">
<div class="p-4 bg-slate-400 m-4 h-screen">
<div class="bg-yellow-100 m-4 ">Hello</div>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论