内部元素的样式为什么在Tailwind中不生效？

huangapple
go评论102阅读模式
英文:

Why inner element's style doesn't apply in tailwind?

问题





Document

Hello

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;head&gt;
  2.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  3.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  4.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  5.     &lt;title&gt;Document&lt;/title&gt;
  6.     &lt;link rel=&quot;stylesheet&quot; href=&quot;head.css&quot;&gt;
  7.     
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10.     &lt;div class=&quot;grid grid-cols-10&quot;&gt;
  11.         &lt;div class=&quot;col-start-1 col-end-3 bg-slate-600 h-screen&quot;&gt;&lt;/div&gt;
  12.         &lt;div class=&quot;col-span-8&quot;&gt;
  13.             &lt;div class=&quot;p-4 bg-slate-400 m-4 h-screen&quot;&gt;
  14.                 &lt;div class=&quot;bg-yellow-100 m-4 &quot;&gt;Hello&lt;/div&gt;
  15.             &lt;/div&gt;
  16.         &lt;/div&gt;
  17.         
  18.     &lt;/div&gt;
  20. &lt;/body&gt;

<!-- 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 -->

  1. &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

but not with

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;head.css&quot;&gt;

<!-- end snippet -->

(using tailwind CLI)

答案1

得分: 1

你可能没有将Tailwind添加到你的项目中。上面的代码按预期工作。你只需在<head>中添加以下代码：

  1. <script src="https://cdn.tailwindcss.com"></script>

请参考下面的代码片段：

  1. <!doctype html>
  2. <html>
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8. </head>
  10. <body>
  11.   <div class="grid grid-cols-10">
  12.     <div class="col-start-1 col-end-3 bg-slate-600 h-screen"></div>
  13.     <div class="col-span-8">
  14.       <div class="p-4 bg-slate-400 m-4 h-screen">
  15.         <div class="bg-yellow-100 m-4 ">Hello</div>
  16.       </div>
  17.     </div>
  18.   </div>
  19. </body>
  21. </html>

希望这可以帮助你。

英文:

You probably didn't include Tailwind into your project. The code above works as expected. You just need to add &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt; inside &lt;head&gt;.

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!doctype html&gt;
  2. &lt;html&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.   &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
  8. &lt;/head&gt;
  10. &lt;body&gt;
  11.   &lt;div class=&quot;grid grid-cols-10&quot;&gt;
  12.     &lt;div class=&quot;col-start-1 col-end-3 bg-slate-600 h-screen&quot;&gt;&lt;/div&gt;
  13.     &lt;div class=&quot;col-span-8&quot;&gt;
  14.       &lt;div class=&quot;p-4 bg-slate-400 m-4 h-screen&quot;&gt;
  15.         &lt;div class=&quot;bg-yellow-100 m-4 &quot;&gt;Hello&lt;/div&gt;
  16.       &lt;/div&gt;
  17.     &lt;/div&gt;
  18.   &lt;/div&gt;
  19. &lt;/body&gt;
  21. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月13日 19:05:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76004685.html
  • css
  • html
  • tailwind-css
  • web
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定