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>

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

 

 

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