windicss使用

<template>

  <div class="layout-header">

    <div class="left">left</div>

    <div class="center">center</div>

    <div class="right">right</div>

  </div>

  <div class="w-200 h-200 bg-red-100 p-1"> 使用方式二

    <div class="bg-green-400 w-200 h-50 text-2xl italic ">

      文字大小text-2xl 内边距p-1 宽度w-50 高度h-50

        文字斜体italic 文字粗体

      </div>

    <div class="bg-green-400 w-200 h-50 text-2xl italic font-bold text-center text-purple-100">

      文字大小text-2xl 内边距p-1 宽度w-50 高度h-50

        文字斜体italic 文字粗体font-bold 文字居中对齐 文字颜色purple是透明度

      </div>

    <div class="bg-blue-400 w-50 h-50 m-1 rounded border-2 border-red-500 divide-x-4">

      <div> 圆角rounded-md 边框宽度border-2 边框颜色border-red-500  </div>

      <div>分割线 divide-x-4 横向分割 </div>

      <div class="ring-4 ring-yellow-400 m-4 ring-opacity-50"  >

        阴影宽度4 阴影颜色yellow  阴影透明度

      </div>

    </div>

    <div style="width:100px;height:100px;background:red; box-shadow: 0 0 10px 10px blue;">

    这个也是阴影，怎么跟上面不同,box-shadow：0(横向不偏移 ) 0（纵向不偏移）10px(模糊值) 10(模糊值偏移) blue颜色

     

    </div>

    <div style="width:100px;height:100px;background:red; box-shadow: 0 0 10px 0px blue;">

    这个也是阴影，怎么跟上面不同,box-shadow：0(横向不偏移 ) 0（纵向不偏移）10px(模糊值) 10(模糊值偏移) blue颜色

     

    </div>

  </div>

</template>

<script setup lang="ts">

</script>

<style scoped>

.layout-header{

  height: 64px;

  background-color: blueviolet;

  @apply flex flex-row justify-between items-center pl-1 pr-8;/**这个就应该是使用方式一 */

}

</style>