Tailwind CSS Setup

To use pre-built UI components for user login Tailwind CSS must be configured in your project. This guide walks you through the complete setup process for both new and existing Tailwind installations.

Prerequisites

• React 18+
• TypeScript 5+
• Node.js 16+

Quick Setup (New Tailwind Installation)

If you don't have Tailwind CSS in your project yet, follow these steps:

1. Install Dependencies

yarn add -D tailwindcss @tailwindcss/postcss postcss

2. Configure PostCSS

Create a postcss.config.mjs file in your project root:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

3. Create Tailwind Config

Create a tailwind.config.ts file using the following Tailwind plugin:

import { withAccountKitUi } from "@account-kit/react/tailwind";
 
export default withAccountKitUi(
  {
    // Your existing Tailwind config (if any)
    content: [
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
    ],
  },
  {
    // Account Kit UI theme customizations (optional)
    // See customization guide below for available options
  },
);

4. Import Tailwind Styles

Create or update your global CSS file to include Tailwind:

@import "tailwindcss";
@config '../tailwind.config.ts';

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

Existing Tailwind Installation

If you already have Tailwind CSS configured in your project:

1. Update Your Tailwind Config

Wrap your existing configuration with Account Kit's plugin:

import { withAccountKitUi } from "@account-kit/react/tailwind";
 
export default withAccountKitUi(
  {
    // Your existing Tailwind config - DON'T replace, just wrap!
    content: [
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
      // ... your existing content patterns
    ],
    theme: {
      // ... your existing theme customizations
    },
    plugins: [
      // ... your existing plugins
    ],
  },
  {
    // Account Kit UI theme customizations
  },
);

2. Update CSS Import (Tailwind v4 only)

If using Tailwind v4, update your CSS to reference the config:

@import "tailwindcss";
@config '../tailwind.config.ts';

Framework-Specific Setup

Next.js

For Next.js projects, make sure to import your global CSS in app/layout.tsx:

import "./globals.css";
 
// ... rest of your layout

Create React App

Import your global CSS in src/index.js or src/index.tsx:

import "./index.css";
 
// ... rest of your index file

Vite

Import your global CSS in src/main.tsx:

import "./index.css";
 
// ... rest of your main file

Testing Your Setup

To verify Tailwind is working correctly with Account Kit:

1. Start your development server
2. Add a simple Smart Wallets UI component to test:

import { useAuthModal } from "@account-kit/react";
 
export function TestComponent() {
  const { openAuthModal } = useAuthModal();
 
  return (
    <button className="akui-btn akui-btn-primary" onClick={openAuthModal}>
      Test Auth Modal
    </button>
  );
}

3. The button should render with pre-built styling

Troubleshooting

Styles Not Loading

If UI components appear unstyled:

1. Verify CSS import: Make sure you're importing your global CSS file
2. Check config path: Ensure the @config path in your CSS matches your config file location
3. Restart dev server: Sometimes a restart is needed after config changes
4. Verify content paths: Make sure your Tailwind content array includes all component files

Build Errors

If you encounter build errors:

1. TypeScript config: Ensure your tsconfig.json includes the Tailwind config file
2. PostCSS version: Make sure you're using compatible PostCSS versions
3. Import paths: Verify all import paths in your config are correct

Dark Mode Issues

If dark mode isn't working correctly:

1. Color sets: Ensure you're using createColorSet for colors that should change between modes
2. CSS variables: Check that CSS custom properties are being generated correctly
3. Theme detection: Verify your app has proper dark mode detection

Next Steps

After setting up Tailwind CSS:

• Customize your theme with colors and styling
• Set up authentication in your React app
• Use UI components for pre-built authentication flows
• Explore React hooks for custom UI implementations

Need Help?

If you're still having issues with Tailwind setup:

1. Review the troubleshooting guide
2. Join our Discord community for support