全栈开发个人博客03：响应式设计

Tailwind CSS 是一个功能强大的 CSS 框架，通过类名快速构建响应式和可自定义的用户界面。它提供了大量的预定义类，如 bg-blue-500、text-xl、p-4 等，使得样式的应用变得非常高效，无需写大量自定义 CSS。与传统的 CSS 框架不同，Tailwind CSS 强调可组合和可配置性，支持通过配置文件定制颜色、间距、字体等属性，极大提高了开发速度并且保持了灵活性。

1. 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>