Installation React

Step-by-step guide to install Blockies Animate in your React project

1. Install Tailwind CSS v4

Install Tailwind CSS and its peer dependencies:

pnpm add -D tailwindcss postcss autoprefixer

Then initialize Tailwind:

pnpm dlx tailwindcss init -p

2. Configure Tailwind

Update your tailwind.config.js file to enable JIT and scan your React files:

3. Import Tailwind CSS

Create a CSS file (e.g., src/index.css) and include the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then import this CSS file in your main entry point (e.g., src/main.tsx or src/index.tsx):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
  <App />
</React.StrictMode>
);

4. Install clsx and tailwind-merge

pnpm add clsx tailwind-merge

5. Create a utilities file

Create a file named utils.ts inside the src/lib folder with the following content:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

References:

• Official Tailwind CSS guide