科技资讯

Document

tailwindcss（3.3版本）的某些实际骚操作应用

 <div class="text-[14px] text-[#000000] font-bold">自定义文字大小  颜色 加粗</div>
 <div class="flex flex-1 h-[calc(35%-50px)]"> 使用calc自动计算高度样式</div>
我有一些样式是全局通用的，比如按钮，卡片的一些样式，我该怎么维护？
你可以通过tailwindcss提供的@layer指令将比较通用的样式layer到components层，
作为组件级别的样式，从而可以达到全局复用的目的。

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  /* 或者
  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
*/

  @layer components {
    //定义组件样式
    .btn-blue {
      @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
    }
  }

 @layer utilities {
  //定义工具样式
    .bob {
      @apply bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
    }
  }
</style>