Tailwind CSSをNext.jsで使用してみた

<br>

[この記事](https://coliss.com/articles/build-websites/operation/work/animate-ui-interaction-and-animations.html)を見て、Animataの中にあるflip-cardを試してみようと思ったら日本語の記事がなく思ったよりセットアップに時間がかかったので備忘録としてまとめておく

# 目標

以下のようなカードを作成する

セットアップさえできれば[このページ](https://animata.design/docs/card/flip-card)のコードをコピペするだけで導入できる

![operationcheck.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1353033/b74ba00e-ce8e-0e2d-9cb1-3c17a39a1723.gif)


# 環境

- Windows 11
- VSCode
- npm

各ツールのインストール方法については割愛

# 手順

<br>

## 1.プロジェクトを作成

下記コマンドでNext.jsのひな型ファイルを作成

```powershell
npx create-next-app my-project
```
※typescript・eslint・approuterをYESにしておく

<br>

## 2.Tailwind CSSのインストール

フォルダに移動後

下記コマンドでパッケージをインストール

```powershell
npm install -D tailwindcss postcss autoprefixer
```

<br>

下記コマンドでtailwind.config.jsを作成

```powershell
npx tailwindcss init -p
```

<br>

作成したtailwind.config.jsに以下のように記載

```jsx
/** @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: [],
}
```

<br>

## 3.CSSの追加

globals.cssの中身を削除して以下のように記載

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

<br>

- [ ] 余談
    
    この時下記のように波線で表示される
    
    ![スクリーンショット 2024-07-27 001700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1353033/9bd0367e-c077-1900-c4bc-0b14650a4c92.png)

    <br>
    
    これでもとくに問題はないが気になる場合は下記の拡張機能をインストールすれば解消される
    
    ![スクリーンショット 2024-07-27 001712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1353033/fd37cde8-6eee-4da7-219b-11031a0c15e3.png)
    
   ![スクリーンショット 2024-07-27 001743.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1353033/a3b3203e-10a0-2e4a-ba89-ebe717006bbd.png)    

## 4.設定ファイルの設定

tsconfig.jsonに以下を追加(baseUrlを追加することになるはず

```jsx
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

<br>

## 5.その他animataの起動に必要なパッケージのインストールとファイルを作成

下記コマンドでパッケージをインストール

```powershell
npm install tailwind-merge clsx lucide-react tailwindcss-animate
```

<br>

tailwind.config.jsに以下のようにプラグインを追加

```jsx
module.exports = {
  plugins: [require("tailwindcss-animate")],
};

```

<br>

app以下にlib/utils.tsを作成し以下のように記載

```jsx
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

<br>

## 6.コードを記載

[この記事](https://animata.design/docs/card/flip-card)を参考に

components/animata/card/flip-card.tsxを作成して以下のように記載

```jsx
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>
  );
}

```

<br>

page.tsxの中身を削除して以下のように記載

```jsx
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>
  )
}
```

<br>

## 7.コードを実行

以下のコマンドを実行し、正しく出力されているかを確認

```powershell
npm run dev
```

<br>

# まとめ

今回初めてTailwind CSSを使用してみた

各参考サイトを個別に見ただけではセットアップができず思ったより導入で時間がとられたが、完了してしまえばクリエイティブなボタンやカードといった素晴らしいデザインを簡単に導入することができ、自作のアプリでもクオリティの高いUIが導入できる素晴らしいツールだと感じた

今までフロントエンド、特にCSSに悩まされてきたので今後はぜひとも活用したい

<br>

以上、何かご質問やご不明点・追記などありましたら

お気軽にコメントください

<br>


# 参考サイト

[これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata](https://coliss.com/articles/build-websites/operation/work/animate-ui-interaction-and-animations.html)


[Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)

[animataのセットアップについて](https://animata.design/docs/setup)

[Flip Cardのページ](https://animata.design/docs/card/flip-card)