1. 为什么选择tailwindcss

• 不用定义类名，强迫症福音
• 类名原子化，方便组合，节省css代码
• 编辑器支持，vscode tailwindcss插件，自动补全类名
• 接入tailwind prettier插件，自动排序类名，提高渲染性能
• 可以构建响应式设计，md:以上可视为桌面端，

2. V4版本升级

• v4版本无需配置文件，自动扫描用到类名的文件，用到插件也需要在global.css中导入使用，比如动画样式

  //global.css
  @import "tailwindcss";
  @import "tw-animate-css";
  

• 使用PostCSS，可以处理tailwindcss的配置,默认已经导入 autoprefixer，磨平浏览器差异

// postcss.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config

3.接入谷歌字体

• 在谷歌字体库 找到喜欢的字体，比如Schoolbell
• 在global.css中导入字体

// global.css
@import url('https://fonts.googleapis.com/css2?family=Schoolbell&family=ZCOOL+KuaiLe&display=swap');

@theme {
  --font-schoolbell: 'Schoolbell', cursive;
}

• 直接使用类名font-schoolbell

<h1 class="font-schoolbell">Hello World</h1>