Mini Apps

Appearance

Creating a new React App using Vite and Tailwind ​

This guide will show you how to set up a new React project using Vite, with Typescript, Tailwind and Wagmi. We're using yarn as our package manager in this guide, but feel free to use pnpm, bun or npm if you prefere.

The first step is to create a new React app using Vite. You can do this by running the following command in your terminal:

Install vite via yarn:

bash
yarn create vite

Choose the React + Typescript option, move to your new directory and install the dependencies.

bash
❯ yarn create vite
yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-vite@6.2.0" with binaries:
      - create-vite
      - cva
✔ Project name: … mini-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript
bash
cd mini-app
yarn
yarn dev

Now that you have created your React app, it’s time to install Tailwind. You can do this by running the following command in your terminal:

bash
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After installing Tailwind, you need to configure it for your app. You can do this by creating a tailwind.config.js file at the root of your project and adding the following code:

js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, you need to create a CSS file to import your Tailwind styles. You can do this by creating a index.css file in the root of your project and adding the following code:

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

Install the Wagmi package by running the following command in your terminal

bash
yarn add wagmi viem@2.x @tanstack/react-query

Finally, follow the manual configuration steps in the Wagmi guide to configure Wagmi in your project. https://wagmi.sh/react/getting-started#manual-installation

You're now ready to build your Mini App!