边距

# 边距
border-solid border-l-1px border-gray-5

绝对定位居中

# 利用left定位到中间,然后用tanslate偏移自己的50%
left-[50%]
transform
-translate-x-1/2

IE10兼容小记

// 这里兼容IE10，生成非 Variants 颜色样式
plugins: [plugin(({ theme, addDynamic }) => {
  // <https://github.com/windicss/windicss/blob/6aa033c00a51e4f24b7ae5a792c7461c20114eb2/src/plugin/aspect-ratio/index.ts>
  const colors = theme('colors');
  // console.log(process.env.NODE_ENV !== 'development');
  // 解析后缀生成颜色
  const parseVariant = (variant) => {
    // 处理规范中颜色
    const path = variant.replace('-', '.');
    let color;
    color = get(colors, path);
    // 处理非规范颜色
    if (variant.endsWith(']')) {
      color   = variant.replace('[', '').replace(']', '');
    }
    // 如果存在default
    if (color && typeof color !== 'string') color = color.DEFAULT;
    return { path, color };
  };
  addDynamic('bg', ({ Utility, Property }) => {
    const variant = Utility.raw.replace('bg-', '');
    const {  color } = parseVariant(variant);
    return  Property('background-color', color);
  });
  addDynamic('text', ({ Utility, Property }) => {
    const escape = ['center'];
    if (escape.includes(Utility.raw))  return undefined;
    const variant = Utility.raw.replace('text-', '');
    const {  color } = parseVariant(variant);
    // 如果没有颜色直接不处理
    if (!color || color.endsWith('px')) return;
    console.log(variant, color);
    return  Property('color', color);
  });
})],

布局🐤

Windi CSS

divide

前提需要preflight

divide-x divide-1px divide-gray-500 divide-solid

group使用

可以控制显隐藏

<div class="group flex justify-between space-x-8px">
  <div class="truncate flex-1">Pixeleye 官网-超长名称显示效果的示例</div>
  <div class="flex space-x-8px">
    <PIcon class="display-none group-hover:(!block)" name="edit" @click.stop=""></PIcon>
    <div
      class="w-20px text-5 h-20px bg-black rounded-full flex text-white items-center justify-center"
    >
      {{ item._count.stories }}
    </div>
  </div>
</div>

Flex专项

子元素宽度超过父元素时

flex-1 w-0