LogoBlockies Animate.

Installation Vite

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

Follow these steps to set up your Vite project with Tailwind CSS, clsx, and recommended utilities for React.

1. Create a new Vite project

You can use Vite’s scaffolding tool to create your project:

pnpm create vite my-app -- --template react-ts

Then move into the project folder:


cd my-app

2. Install Tailwind CSS v4

Install Tailwind CSS and its dependencies:

pnpm add -D tailwindcss postcss autoprefixer

Initialize the config files:

pnpm dlx tailwindcss init -p

3. Configure Tailwind

Update your tailwind.config.js file:

4. Import Tailwind CSS

Create a src/index.css file and add:


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

Then import it in your main file:

main.tsx

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

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

5. Install clsx and tailwind-merge

pnpm add clsx tailwind-merge

6. Create a utilities file

Create src/lib/utils.ts with:

src/lib/utils.ts

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

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

Done! Your Vite + React project is now ready to use Tailwind CSS and utility helpers.

References: