# Creating a Next app with RainbowKit and Tailwind
By [0xModene](https://paragraph.com/@modene) · 2022-11-09
---
This is an opinionated, simple guide to quickly create a dapp using [Next.js](https://nextjs.org/), [RainbowKit](https://www.rainbowkit.com/docs/introduction), and [Tailwind](https://tailwindcss.com/)
[Subscribe](null)
Next.js App
-----------
In the development directory of your choice, run:
npx create-next-app@latest --ts
Simple as that! The tool will run you through a wizard to set up some basic configuration for your project and scaffold a Next app with Typescript support and built-in types, requiring no further configuration.
Tailwind.css
------------
The next step is installing and setting up [Tailwind.css](https://tailwindcss.com/)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This will install Tailwind and some required dependencies, as well as generate both your `tailwind.config.js` and `postcss.config.js` files, which are empty by default. You’ll then want to add the following to `tailwind.config.js`:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Once this is complete, the app is setup to use Tailwind! Refer to the [Tailwind docs](https://tailwindcss.com/) for more info on using Tailwind and how you can change its configs.
RainbowKit
----------
Now it’s time to set up RainbowKit. The Rainbow team has a CLI tool that actually does this and the Next app steps for you, but we’re doing this the ‘hard’ way so you can get a better feel for how things work.
Install RainbowKit and it’s required dependencies:
npm install @rainbow-me/rainbowkit wagmi ethers
Now, go to your `pages/_app.tsx` file and replace it with the following:
import "../styles/globals.css";
import type {AppProps} from "next/app";
import "@rainbow-me/rainbowkit/styles.css";
import {getDefaultWallets, RainbowKitProvider} from "@rainbow-me/rainbowkit";
import {chain, configureChains, createClient, WagmiConfig} from "wagmi";
import {alchemyProvider} from "wagmi/providers/alchemy";
import {publicProvider} from "wagmi/providers/public";
const {chains, provider} = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
[alchemyProvider({apiKey: process.env.ALCHEMY_ID}), publicProvider()]
);
const {connectors} = getDefaultWallets({
appName: "My Dapp",
chains,
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});
export default function App({Component, pageProps}: AppProps) {
return (
);
}
What we’re doing here is configuring the clients and context providers required for `wagmi`, `ethers`, and `RainbowKit`. The `connectors` and `wagmiClient` variables can be edited and configured how you need them to be, but the default is good here. More information on those can be found [here](https://www.rainbowkit.com/docs).
Now that RainbowKit is installed and set up, we need to add the connect button so that we can actually connect to the chain from a wallet. In your `pages/index.tsx` file, import the `ConnectButton` component and insert it into the view as shown below:
{...}
import styles from "../styles/Home.module.css";
import {ConnectButton} from "@rainbow-me/rainbowkit";
export default function Home() {
return (
{...}
You can put the component anywhere, this is only an example. Once you’ve done this, run `npm run dev` to serve up the site. You should notice a button reading ‘Connect Wallet’ that, when clicked, will prompt you to connect to an assortment of crypto wallets.
That’s it! You’re now all set to build your dapp.
### References
* [Github for this code](https://github.com/0xModene/template-next-rainbowkit-tailwind)
* [Next.js docs](https://nextjs.org/)
* [Tailwind docs](https://tailwindcss.com/)
* [RainbowKit docs](https://www.rainbowkit.com/docs/introduction)
---
*Originally published on [0xModene](https://paragraph.com/@modene/creating-a-next-app-with-rainbowkit-and-tailwind)*