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>

展示效果鼠標劃入效果變色　　

 

 

  第四種添加自定義樣式，生成深色模式變體，這個我還沒有明白在哪種場景中使用，先不寫了