​
Support TAILWIND in 5 minutes

1

Download TAILWIND extension

Download the extension and create an account. If needed, you can follow the onboarding guide here.
2

Download TAILWIND wallet adapter

yarn add @tailwindzone/connect-rainbowkit
3

Import and setup TAILWIND wallet adapter

import { defineChain } from "viem";
import { tailwindWallet } from "@tailwindzone/connect-rainbowkit"

export const seimainnet = defineChain({
  id: 1329,
  name: 'Sei Mainnet',
  nativeCurrency: { name: 'Sei', symbol: 'SEI', decimals: 18 },
  rpcUrls: {
    default: {
      http: ['https://evm-rpc.sei-apis.com'],
    },
  },
})

const config = getDefaultConfig({
  appName: 'RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [seimainnet],
  wallets: [{
    groupName: 'Popular',
    wallets: [
      tailwindWallet,
      metaMaskWallet
    ]
  }],
  ssr: true,
});
4

Since Rainbowkit uses Wagmi, we set up a Provider with config above.

import { WagmiProvider } from "viem";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const client = new QueryClient();

// in _app.tsx if using Next.js, 
// or your root component if using another framework
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider>
          { /* Your app goes here */ } 
          <Component {...pageProps} />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
5

Connect Modal from RainbowKit's `ConnectButton` should now show TAILWIND!

import { ConnectButton } from "@rainbow-me/rainbowkit";

function App() {
  return (
    <>
      { /* Click me! */ }
      <ConnectButton />
    </>
  );
}
6

Done!

You just supported a universal USDC gas wallet. Prepare to get more users!