Tailwind CSS中自定义样式使用
有三种自定义
第一种普通的编写自己的样式,在style中添加并且使用
@layer utilities {.back1 {
background:#ff0000;
}
.back2 {
background:#ff00ff;
}
}
页面添加back样式
<h1 class="font-semibold text-3xl text-yellow-700 back1">vue2中使用TailWind Css</h1>
显示效果
第二种添加自定义样式,并且适应不同的屏幕,也就是官方说的(生成响应式变体)
@layer utilities { @variants responsive { .back1 { background: #ff0000; } .back2 { background: #ff00ff; } } }
页面添加
<h1 class="font-semibold text-3xl text-yellow-700 md:back1 lg:back2">vue2中使用TailWind Css</h1>
显示效果中屏幕和大屏幕背景
第三种添加自定义样式,按钮点击,划入,划出效果,也就是官方说的(生成状态变体)
@layer utilities { @variants hover, focus { .back1 { background: #ff0000; } .back2 { background: #ff00ff; } } }
页面添加
<h1 class="font-semibold text-3xl text-yellow-700 hover:back2">vue2中使用TailWind Css</h1>
展示效果鼠标划入效果变色
第四种添加自定义样式,生成深色模式变体,这个我还没有明白在哪种场景中使用,先不写了
记下点滴,等老了慢慢欣赏