「🦆TSK的博客」

Appearance

On this page

工具包 ​

vite ​

vite 原理 ​

  1. 扫描整个项目,找到依赖的第三方模块
  2. 编译第三方模块,放到 .vite 目录中
  3. 重写返回的导入路径,指向 .vite 目录中的编译后的文件
    import {} from 'xxx' -> import {} from '/node_modules/.vite/deps/xxx'
  4. 请求服务器的时候,直接返回 /node_modules/.vite/deps/xxx

tailwindcss ​

指令@layer ​

  1. 指令 @layer base 表示基础层
  2. 指令 @layer components 表示组件层
  3. 指令 @layer utilities 表示工具层
css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

Tailwind 会自动将任何 @layer 指令中的 CSS 移动到与对应的 @tailwind 规则相同的位置，因此你不必担心按特定顺序编写 CSS 以避免特异性问题。

添加到图层的任何自定义 CSS 仅当该 CSS 实际用于你的 HTML 时才会包含在最终构建中，就像默认内置到 Tailwind 中的所有类一样。

使用 @layer 封装任何自定义 CSS 还可以使用具有这些规则的修饰符，如 hover: 和 focus: 或响应式修饰符，如 md: 和 lg:

字体 ​

  1. serif 衬线字体族
  2. sans-serif 非衬线字体族 sans 的意思是无
  3. font-family: system-ui 系统默认字体

语义化版本规范 ​

版本格式: 主版本号.次版本号.修订号

  1. 主版本号
    • 当你做了不兼容的 API 修改
  2. 次版本号
    • 向下兼容的功能性新增
  3. 修订号
    • 向下兼容的问题修复