小而美的 css 的原子化

.bg-blue { background-color: #357edd; } 
.f1 { font-size: 3rem; }
.m0 { margin: 0; }

<div class="media">
  <a href="https://www.zcygov.cn/" class="img">
    <img width="40" src="logo.png" alt="zcy" />
  </a>
  <div class="bd">@小明 14 分钟之前</div>
</div>
<style>
.media {
  margin: 10px;
}
.media,
.bd {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}
.media .img {
  float: left;
  margin-right: 10px;
}
.media .img img {
  display: block;
}
</style>

<div class="media">
  <a href="https://www.zcygov.cn/" class="imgExt">
    <img width="40" src="https://sitecdn.zcycdn.com/f2e-assets/b37c37db-ce59-4bfe-a889-5c8615d008c8.png" alt="zcy" />
  </a>
  <div class="bd">@小明 14 分钟之前</div>
</div>
<style>
  ...
/* 图片在右侧 */
.media .imgExt {
  float: right;
  margin-left: 10px;
}
</style>

<div id="rightRail">
<div class="media">
  <a href="https://www.zcygov.cn/" class="imgExt">
    <img width="40" src="https://sitecdn.zcycdn.com/f2e-assets/b37c37db-ce59-4bfe-a889-5c8615d008c8.png" alt="zcy" />
  </a>
  <div class="bd">@小明 14 分钟之前</div>
</div>
<style>
</div>
<style>
  ...
/* 页面右侧容器中时，字体变小 */
#rightRail .bd {
    font-size: smaller;
}
</style> 

.text-overflow-dot {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
...
  .title-number {
    width: 55%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
...  
.invoice-content {
    div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
 }

.time-tip {
  i {
    margin-left: 10px;
    cursor: pointer;
  }
}

#service-charge-Bill {
  .zcy-search-panel .ant-form-item-label {
    min-width: 80px;
  }
}

.invoice-tpl-container {
  max-height: 360px;
  overflow-y: scroll;
}

.add-invoice-tpl-item {
  border: 1px dashed rgb(209, 215, 232);
  text-align: center;
  height: 160px;
  line-height: 160px;
  margin: 10px;
}

.invoice-tpl-item {
  border: 1px solid rgb(209, 215, 232);
  margin: 10px;
  height: 160px;
  position: relative;

  .invoice-content {
    overflow: hidden;
    padding: 20px;
    height: 119px;

    div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .invoice-type-mark {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: white;
      background-color: #3177fd;
    }
  }

  .operate {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgb(209, 215, 232);
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}

.invoice-tpl-item.active {
  border-color: #3177fd;
}

.default-mark {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #bbb;
  color: white;
  padding: 0 5px;
}

.catalogue {
 &-title {
   display: flex;
   &-btns {
     flex-grow: 1;
     align-items: center;
     text-align: right;
     .ant-btn {
       margin: 0 5px;
     }
   }
 }
 &-content {
   height: calc(100% - 60px);
   overflow: auto;
   padding: 18px;
   .cy-tree {
     width: 80%;
   }
   .ant-tree {
     overflow: auto;
   }
 }
 &-tree {
   height: calc(100% - 22px);
   .ant-input {
     width: 100%;
     &-search {
       width: 80%;
       flex-grow: 1;
     }
   }
 }
}

<div class="overflow-hidden mr-1">
  <a href="https://www.zcygov.cn/" class="float-left mr-1">
    <img
      width="30"
      src="logo.png"
      alt="zcy"
    />
  </a>
  <div class="overflow-hidden text-sm">@小明 14 分钟之前</div>
</div>

import { defineConfig } from 'windicss/helpers';
import colors from 'windicss/colors';

export default defineConfig({
  theme: {
    extend: {
      transitionProperty: {
        width: 'width',
      },
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
      colors: {
        gray: colors.coolGray,
        blue: colors.sky,
        red: colors.rose,
        pink: colors.fuchsia,
      },
      fontSize: {
        xs: '.75rem',
        sm: '.875rem',
        tiny: '.875rem',
        base: '14px',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
        '7xl': '5rem',
      },
    },
  },
});

<button
className="bg-blue-400 text-sm text-white font-mono font-light py-2 px-4 border-2 border-rounded border-blue-200"
>
  Button
</button>

const myButtonClass = "bg-blue-400 text-sm text-white font-mono font-light py-2 px-4 border-2 border-rounded border-blue-200"

<button
className={myButtonClass}
>
  Button
</button>