# Tailwind CSS Setup

> Complete guide to setting up Tailwind CSS with UI components

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

<CodeBlocks>
  ```bash yarn
  yarn add -D tailwindcss @tailwindcss/postcss postcss
  ```

  ```bash npm
  npm install -D tailwindcss @tailwindcss/postcss postcss
  ```

  ```bash pnpm
  pnpm add -D tailwindcss @tailwindcss/postcss postcss
  ```
</CodeBlocks>

### 2. Configure PostCSS

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

```js postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
```

### 3. Create Tailwind config

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

```ts tailwind.config.ts
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:

<Tabs>
  <Tab title="Tailwind v4 (Recommended)">
    ```css app/globals.css
    @import "tailwindcss";
    @config '../tailwind.config.ts';
    ```
  </Tab>

  <Tab title="Tailwind v3">
    ```css app/globals.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    ```
  </Tab>
</Tabs>

## Existing Tailwind installation

If you already have Tailwind CSS configured in your project:

### 1. Update your Tailwind config

Wrap your existing configuration with the Smart Wallets plugin:

```ts tailwind.config.ts
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:

```css app/globals.css
@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`:

```tsx 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`:

```tsx src/index.tsx
import "./index.css";

// ... rest of your index file
```

### Vite

Import your global CSS in `src/main.tsx`:

```tsx src/main.tsx
import "./index.css";

// ... rest of your main file
```

## Testing your setup

To verify Tailwind is working correctly with Smart Wallets:

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

```tsx
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](/docs/wallets/react/customization/theme) with colors and styling
* [Set up authentication](/docs/wallets/react/quickstart) in your React app
* [Use UI components](/docs/wallets/react/ui-components) for pre-built authentication flows
* [Explore React hooks](/docs/wallets/react/react-hooks) for custom UI implementations

## Need help?

If you're still having issues with Tailwind setup:

1. Review the [troubleshooting guide](/docs/wallets/resources/faqs)
2. Join the [Discord community](https://discord.gg/alchemyplatform) for support