Tailwind CSS 简介
Tailwind CSS 安装
兼容性
  1. Tailwind CSS 入门基础
  2. 兼容性

兼容性

Tailwind CSS 本质上就是 CSS，它的兼容性取决于两个因素：CSS 特性的浏览器支持，以及你使用的 Tailwind 功能。

浏览器支持

官方支持的浏览器

Tailwind CSS 支持以下浏览器的最新版本：

浏览器最低版本
Chrome最新版
Firefox最新版
Safari最新版
Edge最新版
Opera最新版

对于生产环境，建议支持主流浏览器的最近两个版本。

CSS 特性兼容性

Tailwind 使用的 CSS 特性在不同浏览器中的支持情况：

特性ChromeFirefoxSafariEdge
Flexbox✅ 全支持✅ 全支持✅ 全支持✅ 全支持
Grid✅ 全支持✅ 全支持✅ 全支持✅ 全支持
CSS Variables✅ 49+✅ 31+✅ 9.1+✅ 15+
Gap (Flexbox)✅ 84+✅ 63+✅ 14.1+✅ 84+
aspect-ratio✅ 88+✅ 89+✅ 15+✅ 88+

常见兼容性问题

1. Gap 属性

Flexbox 的 gap 属性在旧浏览器不支持：

<!-- 使用 gap -->
<div class="flex gap-4">
  <div>项目1</div>
  <div>项目2</div>
</div>

<!-- 兼容方案：使用 margin -->
<div class="flex -m-2">
  <div class="m-2">项目1</div>
  <div class="m-2">项目2</div>
</div>

2. CSS 变量

Tailwind 4.0 开始大量使用 CSS 变量，旧浏览器需要降级：

/* Tailwind 生成的 CSS */
.text-blue-500 {
  color: var(--color-blue-500);
}

/* 降级方案 */
.text-blue-500 {
  color: #3b82f6;
  color: var(--color-blue-500, #3b82f6);
}

3. aspect-ratio

视频、图片的宽高比在旧浏览器不支持：

<!-- 使用 aspect-ratio -->
<div class="aspect-video">...</div>

<!-- 兼容方案：使用 padding-bottom 技巧 -->
<div class="relative" style="padding-bottom: 56.25%">
  <div class="absolute inset-0">...</div>
</div>

4. position: sticky

粘性定位在某些情况下有 bug：

<!-- 粘性定位 -->
<nav class="sticky top-0">导航</nav>

<!-- 注意：sticky 在 overflow: hidden/auto 的父元素中可能失效 -->

降级策略

使用 PostCSS 插件

安装 autoprefixer 自动添加前缀：

npm install -D autoprefixer

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

使用 @supports 检测

/* 检测是否支持 gap */
@supports (gap: 1rem) {
  .flex-gap { gap: 1rem; }
}

@supports not (gap: 1rem) {
  .flex-gap > * + * { margin-left: 1rem; }
}

渐进增强

先写基础样式，再添加高级特性：

<!-- 基础样式（所有浏览器支持） -->
<div class="bg-gray-100 p-4 rounded-lg">
  <!-- 增强样式（现代浏览器） -->
  <div class="bg-gray-100 p-4 rounded-lg backdrop-blur-sm">
</div>

暗黑模式兼容性

media 策略（默认）

使用系统偏好设置，兼容性好：

// tailwind.config.js
module.exports = {
  darkMode: 'media',
}

<div class="bg-white dark:bg-gray-800">
  自动跟随系统
</div>

class 策略

手动控制，兼容所有浏览器：

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

<html class="dark">
  <div class="bg-white dark:bg-gray-800">
    手动控制
  </div>
</html>

检测和切换

// 检测系统偏好
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// 切换暗黑模式
function toggleDark() {
  document.documentElement.classList.toggle('dark');
}

// 监听系统变化
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    if (e.matches) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  });

IE11 支持

Tailwind 3.0+ 不再支持 IE11。如果必须支持 IE11：

方案一：使用 Tailwind 2.x

npm install tailwindcss@2

配合 polyfill：

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6,Object.entries,Object.values,Array.prototype.includes"></script>

方案二：使用 PostCSS 插件

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-preset-env': {
      stage: 3,
      features: {
        'nesting-rules': false,
      },
    },
  }
}

方案三：降级处理

<!-- IE11 不支持 CSS 变量 -->
<div 
  class="bg-blue-500"
  style="background-color: #3b82f6"
>
  兼容 IE11
</div>

移动端兼容性

iOS Safari 特殊问题

100vh 问题：

<!-- 问题：iOS Safari 的 100vh 包含地址栏 -->
<div class="h-screen">...</div>

<!-- 解决方案：使用 dvh -->
<div class="h-[100dvh]">...</div>

安全区域：

<!-- 适配 iPhone 底部安全区域 -->
<footer class="pb-[env(safe-area-inset-bottom)]">
  底部内容
</footer>

安卓 WebView

某些安卓 WebView 版本较旧，需要注意：

  • CSS 变量支持不完整
  • Flexbox gap 不支持
  • 部分动画卡顿

检测工具

浏览器测试

  • BrowserStack：跨浏览器测试
  • LambdaTest：在线测试平台
  • Can I Use：CSS 特性兼容性查询

CSS 检测

// 检测 CSS 特性支持
function supportsCSS(property, value) {
  return CSS.supports(property, value);
}

// 使用
if (supportsCSS('gap', '1rem')) {
  console.log('支持 gap');
}

if (supportsCSS('aspect-ratio', '16/9')) {
  console.log('支持 aspect-ratio');
}

最佳实践

1. 确定目标浏览器

根据用户群体确定需要支持的浏览器版本：

// .browserslistrc
> 0.5%
last 2 versions
not dead
not IE 11

2. 使用渐进增强

确保核心功能在所有浏览器可用，高级特性作为增强：

<!-- 基础：所有浏览器 -->
<button class="bg-blue-500 text-white px-4 py-2">
  按钮
</button>

<!-- 增强：现代浏览器 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
  按钮
</button>

3. 测试关键功能

在不同浏览器测试：

  • 布局是否正常
  • 交互是否流畅
  • 暗黑模式切换
  • 响应式断点

4. 提供降级方案

对于关键功能，准备降级方案：

<!-- 图片懒加载降级 -->
<img 
  class="w-full h-48 object-cover"
  loading="lazy"
  src="image.jpg"
  alt="图片"
/>

<!-- 或使用 Intersection Observer -->

小结

  • Tailwind 本身兼容现代浏览器，问题主要在 CSS 特性支持
  • 使用 autoprefixer 自动处理前缀
  • gap、CSS 变量、aspect-ratio 需要注意兼容性
  • 暗黑模式推荐使用 class 策略
  • IE11 需要使用 Tailwind 2.x 或降级处理
  • 移动端注意 iOS Safari 的特殊问题
  • 采用渐进增强策略，确保核心功能可用
上一章：Tailwind CSS 安装
下一章：