怎样在Next.js中使用Tailwind CSS实现骨架屏动画-css教程-PHP中文网

直接用 animate-pulse 在 ssr 下会闪烁，因为服务端不执行动画逻辑，hydration 前后样式不一致；应通过 useeffect 延迟添加动画类，或自定义 shine 动画并配合加载状态精准控制。

怎样在next.js中使用tailwind css实现骨架屏动画

为什么直接用 `animate-pulse` 在 SSR 下会闪烁

Next.js 默认服务端渲染，而 animate-pulse 依赖 CSS @keyframes pulse 和浏览器的动画时钟。服务端不执行动画逻辑，生成的 HTML 没有运行时状态，导致 hydration 前后样式不一致 —— 页面首次加载时骨架突然“跳一下”或闪退。

根本原因不是 Tailwind 写法错，而是 SSR + CSS 动画的天然冲突。解决思路不是禁用 SSR，而是让骨架只在客户端挂载后才启用动画。

避免在服务端渲染带 animate-pulse 的元素（比如用 useEffect 控制显示）
用 className 动态拼接，初始不加动画类，hydration 后再补上
不要对骨架组件做 ssr: false 全局禁用（影响 SEO 和首屏内容可访问性）

如何用 `useEffect` 安全添加 `animate-pulse`

最轻量的做法：把骨架容器包裹一层，初始只给基础样式（如背景色、圆角），等组件挂载完成再 patch 动画类。

import { useState, useEffect } from 'react';

function SkeletonCard() {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div classname="{`" bg-gray-200 rounded-lg h-48 w-full :></div>
  );
}

注意点：

useEffect 空依赖数组确保只在客户端执行一次
不要用 mounted && <div classname="animate-pulse..."> 条件渲染整个 DOM —— 这会导致两次渲染，破坏布局稳定性 <li>如果骨架是列表项，建议提升 <code>mounted 到父组件统一控制，避免每个 item 都触发重排

自定义骨架动画：比 `animate-pulse` 更可控

animate-pulse 是简单缩放，实际骨架常需模拟“光扫过”的流动感。Tailwind 允许你直接扩展 keyframes 和 animation，无需脱离工具链。

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

在 tailwind.config.js 的 theme.extend 中加入：

module.exports = {
  theme: {
    extend: {
      animation: {
        'shine': 'shine 2s infinite',
      },
      keyframes: {
        shine: {
          '0%': { 'background-position': '-200% 0' },
          '100%': { 'background-position': '200% 0' },
        }
      }
    }
  }
}

然后在组件中使用：

<div classname="bg-gradient-to-r from-transparent via-gray-300 to-transparent
             bg-[length:200%_100%] rounded-lg h-48 w-full
             animate-shine"></div>