この記事を見て、Animataの中にあるflip-cardを試してみようと思ったら日本語の記事がなく思ったよりセットアップに時間がかかったので備忘録としてまとめておく
目標
以下のようなカードを作成する
セットアップさえできればこのページのコードをコピペするだけで導入できる
環境
- Windows 11
- VSCode
- npm
各ツールのインストール方法については割愛
手順
1.プロジェクトを作成
下記コマンドでNext.jsのひな型ファイルを作成
npx create-next-app my-project
※typescript・eslint・approuterをYESにしておく
2.Tailwind CSSのインストール
フォルダに移動後
下記コマンドでパッケージをインストール
npm install -D tailwindcss postcss autoprefixer
下記コマンドでtailwind.config.jsを作成
npx tailwindcss init -p
作成したtailwind.config.jsに以下のように記載
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
3.CSSの追加
globals.cssの中身を削除して以下のように記載
@tailwind base;
@tailwind components;
@tailwind utilities;
-
余談
この時下記のように波線で表示される
これでもとくに問題はないが気になる場合は下記の拡張機能をインストールすれば解消される
4.設定ファイルの設定
tsconfig.jsonに以下を追加(baseUrlを追加することになるはず
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
5.その他animataの起動に必要なパッケージのインストールとファイルを作成
下記コマンドでパッケージをインストール
npm install tailwind-merge clsx lucide-react tailwindcss-animate
tailwind.config.jsに以下のようにプラグインを追加
module.exports = {
plugins: [require("tailwindcss-animate")],
};
app以下にlib/utils.tsを作成し以下のように記載
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
6.コードを記載
この記事を参考に
components/animata/card/flip-card.tsxを作成して以下のように記載
import { cn } from "@/lib/utils";
interface FlipCardProps extends React.HTMLAttributes<HTMLDivElement> {
image: string;
title: string;
description: string;
subtitle?: string;
rotate?: "x" | "y";
}
export default function FlipCard({
image,
title,
description,
subtitle,
rotate = "y",
className,
...props
}: FlipCardProps) {
const rotationClass = {
x: ["group-hover:[transform:rotateX(180deg)]", "[transform:rotateX(180deg)]"],
y: ["group-hover:[transform:rotateY(180deg)]", "[transform:rotateY(180deg)]"],
};
const self = rotationClass[rotate];
return (
<div className={cn("group h-72 w-56 [perspective:1000px]", className)} {...props}>
<div
className={cn(
"relative h-full rounded-2xl transition-all duration-500 [transform-style:preserve-3d]",
self[0],
)}
>
{/* Front */}
<div className="absolute h-full w-full [backface-visibility:hidden]">
<img
src={image}
alt="image"
className="h-full w-full rounded-2xl object-cover shadow-2xl shadow-black/40"
/>
<div className="absolute bottom-4 left-4 text-xl font-bold text-white">{title}</div>
</div>
{/* Back */}
<div
className={cn(
"absolute h-full w-full rounded-2xl bg-black/80 p-4 text-slate-200 [backface-visibility:hidden]",
self[1],
)}
>
<div className="flex min-h-full flex-col gap-2">
<h1 className="text-xl font-bold text-white">{subtitle}</h1>
<p className="mt-1 border-t border-t-gray-200 py-4 text-base font-medium leading-normal text-gray-100">
{description}{" "}
</p>
</div>
</div>
</div>
</div>
);
}
page.tsxの中身を削除して以下のように記載
import FlipCard from "@/components/animata/card/flip-card"
export default function Home() {
return (
<div>
<FlipCard
description="Computer programming or coding is the composition of sequences of instructions, called programs, that computers can follow to perform tasks."
image=" https://images.unsplash.com/photo-1525373698358-041e3a460346?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3"
rotate="y"
subtitle="What is programming?"
title="Programming"
/>
</div>
)
}
7.コードを実行
以下のコマンドを実行し、正しく出力されているかを確認
npm run dev
まとめ
今回初めてTailwind CSSを使用してみた
各参考サイトを個別に見ただけではセットアップができず思ったより導入で時間がとられたが、完了してしまえばクリエイティブなボタンやカードといった素晴らしいデザインを簡単に導入することができ、自作のアプリでもクオリティの高いUIが導入できる素晴らしいツールだと感じた
今までフロントエンド、特にCSSに悩まされてきたので今後はぜひとも活用したい
以上、何かご質問やご不明点・追記などありましたら
お気軽にコメントください
参考サイト
これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata