为什么 tailwind 不覆盖本地定义的样式?

2024-02-11

我正在尝试通过 tailwindcss 麦粒肿更改文本的默认颜色。但我不明白为什么它不起作用。但 Bootstrap 确实会覆盖默认样式。

我是 tailwindcss 的新手。有人能告诉我这里发生了什么事吗?

在这里您可以在codesandbox中编辑 https://codesandbox.io/s/vue-template-82b4b?file=/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1 class="origintxt text-green-400">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>


<style scoped>

.origintxt {
  color: black;
}

</style>

问题出在我的tailwind.config.js文件。刚刚在阅读文档时发现了这一点。

默认情况下,tailwind 的所有 css 都没有生成!important。要启用它,您必须添加important: true在配置文件中。然后它将覆盖以前的类属性。

// tailwind.config.js

module.exports = {
  important: true,
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 tailwind 不覆盖本地定义的样式? 的相关文章

  • 在生产中使用 css / javascript 源映射对性能有何影响?

    生产环境中应该使用源映射吗 除了调试之外 它们还有什么好处吗 由于额外的服务器往返 它们是否会影响应用程序加载时间 浏览器是否足够智能来加载 map应用程序加载和渲染后的资产 如果浏览器找不到 map asset 404错误 会对性能产生影
  • 在 ASP.NET MVC 中使用 bootstrap 创建模式

    我在 ASP NET MVC 项目上使用 NET Framework 4 5 Bootstrap v3 3 6 我想做的是创建一个模态表单 我尝试了以下方法 在主布局中创建了一个模态容器 div class modal fade style
  • 在 Cytoscape.js 中为家谱设置边缘样式

    我有一个使用 Django 的家谱应用程序 我正在尝试使用http js cytoscape org http js cytoscape org对于用户界面 我想设置之间的边缘样式浪漫的伴侣像这样 http www eprintableca
  • 列表项的替代背景颜色

    我有一个列表 每个项目都是链接的 有没有办法可以替换每个项目的背景颜色 ul li a href link Link 1 a li li a href link Link 2 a li li a href link Link 3 a li
  • 单击元素外部时触发事件的指令

    我知道有很多问题都在问类似的事情 但没有人真正解决我的问题 我正在尝试构建一个指令 当鼠标单击当前元素外部时 该指令将执行表达式 为什么我需要这个功能 我正在构建一个应用程序 在这个应用程序中 有 3 个下拉菜单 5 个下拉列表 如选择的
  • 如何在 jQgrid 中隐藏列但在添加/编辑面板中显示此列

    我想要一种我使用的控制形式 但字段数量太高了 如何显示网格 但只有表单添加 编辑弹出面板中的某些字段显示所有字段 以下是您可以执行此操作的方法 colModel name email label E mail editable true h
  • Antd datepicker (date.clone/date.load 不是函数)

    我有一个反应应用程序 有一个复选框可以禁用日期选择器 但当我使用复选框禁用它时 我无法选择任何日期 如果我删除复选框及其功能 则不会出现错误 目前 我得到 date clone 不是函数 error const dateFormat YYY
  • jQuery 删除函数真的删除 Dom 元素吗?

    我真的想知道 jQuery 是否remove http api jquery com remove 函数确实从 DOM 中删除元素 首先 我看了here https stackoverflow com questions 2185760 j
  • 是否可以全局文本对齐表列而不在每行中指定类?

    想知道提高效率的最佳方法是什么 也许使用 jQuery 我可以接受不兼容 ie7 的解决方案 如果需要的话 即使缺乏对 ie8 的支持也可以 table th td class cal center td td left td td cla
  • 使用Doctype让scrollTop返回0,为什么?

    当我将此 Doctype 放入我的文档中时document body scrollTop返回零 这是为什么 当您使用该 Doctype 时 您会将每个当前浏览器放入所谓的几乎标准模式 http hsivonen iki fi doctype
  • 如何在rollup中使用css @import?

    我尝试创建一个简单的汇总应用程序的配置 但在 css 方面遇到了一些麻烦 这是我的 CSS 文件 import normalize css import typeface roboto html body root height 100 f
  • 使用 System.js 导入 Typescript 编译的模块时出错

    我最近正在学习使用 system js 导入由 Typescript 编译的模块 这些模块之前是为 require js 编译的 并且工作正常 但是合并到system js时 应用时无法导入模块系统生产 js 控制台说 Uncaught i
  • 输入号码时自动格式化 SSN

    我有一个文本字段 用户输入 SSN 号码 输入自身时 它应该格式化 就像关于文本字段的更改 它应该格式化999 999 999以这种方式在显示器本身上 kottenator 的脚本几乎已经完成 但它每隔 3 位数字就中断该值 而不是 3 位
  • 如何列出特定服务器的所有成员?

    我的代码是 const list client guilds find id 335507048017952771 for user of list users console log user 1 username 这实际上没有任何作用
  • EaselJS Alpha 遮罩滤镜

    我对 Canvas 还很陌生 我一直在尝试将图像颠倒过来EaselJS Alpha 蒙版 http www createjs com demos easeljs alphamaskreveal示例 以便初始图像清晰 并且您可以paint是模
  • 在成功回调之前修改 JSONP 结果

    我想从外部服务加载一些 JSON 数据 然而 它提供 foo bar useful 而我真正关心的是 有用 的部分 我需要将那部分传递给success打回来 我正在尝试使用Deferred一次从多个数据源加载 类似this https st
  • 在 Mobile Safari 中点击

    敲击
  • 如何创建浏览器插件?

    我必须创建一个插件 当用户将鼠标悬停在某些术语上时 该插件必须显示信息 谁能告诉我如何做的方向 我对创建插件没有太多想法 我知道我想要做的事情可以通过java脚本来完成 但是java脚本文件可以作为浏览器插件安装吗 任何对此的想法将不胜感激
  • 如何选中表格中输入文本焦点上的复选框

    我试图在输入文本焦点上检查表 DOM 中的复选框 但无法访问复选框元素 但我的焦点正在工作 这是我的 jsfiddle 链接https jsfiddle net 9qha9vft https jsfiddle net 9qha9vft 这是
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an

随机推荐