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>

展示效果鼠标划入效果变色  

 

 

  第四种添加自定义样式,生成深色模式变体,这个我还没有明白在哪种场景中使用,先不写了

 

posted @ 2022-07-01 17:57  归尘2016  阅读(1180)  评论(0编辑  收藏  举报