英文:
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:
<footer class=" bg-lime-600 ">Lorem ipsum dolor sit</footer>
This background color is not being applied to the website, but in the Tailwind playground it works.
答案1
得分: 1
请考虑检查以下内容:
- 文件中的代码是否在Tailwind配置的
content
文件模式范围内。 - 类名是否不是通过字符串拼接/插值构建的 - 类名必须呈现为完整的不间断字符串。
blue-500
或blue.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
orblue.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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论