如何解决Tailwind css 背景渐变不适用
我的顺风背景渐变没有被应用
这是我的 html 代码:
<div>
<button className="bg-gradient-to-r from-primary-orange via-secondary-orange to-lighter-orange w-4/5 p-4 mt-10 rounded">Search Flights</button>
</div>
我的 tailwind.config.js:
module.exports = {
purge: [],darkMode: false,// or 'media' or 'class'
theme: {
backgroundColor: theme => ({
...theme('colors'),'primary-orange': '#FF8C00','secondary-orange':'#FFA500','lighter-orange':'#FFD700'
})
},variants: {
extend: {},},plugins: [],}
使用 post-css 运行我的 react 脚本,以便我添加到 tailwind.config 的所有其他颜色在生成 post-css 后都能正常工作,而不是渐变。
知道为什么吗?
谢谢
解决方法
如果您想扩展默认调色板而不是覆盖它,请使用 extend
文件的 tailwind.config.js
部分。然后向其添加 gradientColorStops
属性,您可以在其中编写自定义颜色。
module.exports = {
purge: [],darkMode: false,theme: {
extend: {
gradientColorStops: theme => ({
'primary': '#FF8C00','secondary': '#FFA500','danger': '#FFD700',}),},variants: {
extend: {},plugins: [],}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。