Some Tailwind CSS styles are not working on a website, but work correctly in the Tailwind playground

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

Some Tailwind CSS styles are not working on a website, but work correctly in the Tailwind playground

问题

我已经在我的网站上使用了Tailwind CSS,现在有一些样式没有被应用。然而,当我在Tailwind playground上使用它们时,它们有效。

例如:

<footer class="bg-lime-600">Lorem ipsum dolor sit</footer>

这个背景颜色没有被应用到网站上,但在Tailwind playground上它有效。

英文:

I have been using Tailwind CSS on my website and now some styles are not been applying there. However, when I use them on the Tailwind playground they work.

For example:

&lt;footer class=&quot; bg-lime-600 &quot;&gt;Lorem ipsum dolor sit&lt;/footer&gt;

This background color is not being applied to the website, but in the Tailwind playground it works.

答案1

得分: 1

请考虑检查以下内容:

  • 文件中的代码是否在Tailwind配置的content文件模式范围内。
  • 类名是否不是通过字符串拼接/插值构建的 - 类名必须呈现为完整的不间断字符串。
  • blue-500blue.500是否在您的Tailwind配置中存在作为颜色。
  • bg-blue-500是否会解析为一个Tailwind类候选项。如果您已经以某种方式自定义了Tailwind配置,可能不是这种情况。
  • 页面上是否有其他可能干扰Tailwind类的CSS,可能会覆盖Tailwind规则。
  • 自您添加类名以来,Tailwind是否已运行编译。如果正在运行,请尝试重新启动开发/监视任务。
  • 问题中的元素是否在页面上可见。
英文:

Consider checking:

  • The code the file is in is covered by the content file globs in the Tailwind configuration.
  • The class name is not built via string concatenation/interpolation – class names must appear as complete unbroken strings.
  • blue-500 or blue.500 exists as a color in your Tailwind configuration.
  • bg-blue-500 would resolve to a Tailwind class candidate. This might not be the case if you have customized your Tailwind configuration in a certain way.
  • There is not some other CSS on the page that may interfere with the Tailwind class, perhaps overriding the Tailwind rule.
  • Tailwind has run a compilation since you added the class name. Try restarting the dev/watch task if you have it running.
  • The element in question is visible on the page.

huangapple
  • 本文由 发表于 2023年4月19日 15:31:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76051818.html
匿名

发表评论

匿名网友

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

确定