Skip to content

Tailwindcss Integration Guide

In this guide, we will go over how to integrate tailwindcss with Onchainkit. OnchainKit comes with first class support for tailwindcss.

First, update content and theme.extend in your tailwind configuration.

tailwind.config.js
import path from 'node:path'; 
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{ts,tsx}'
    path.join(path.dirname(require.resolve('@coinbase/onchainkit')), '**/*.js'), 
  ],
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
    extend: {  
      fontFamily: {  
        display: 'DM Sans, sans-serif', // Set to font of your choice
      },  
      fill: {  
        default: 'var(--bg-default)',  
        alternate: 'var(--bg-alternate)',  
        inverse: 'var(--bg-inverse)',  
        primary: 'var(--bg-primary)',  
        secondary: 'var(--bg-secondary)',  
        error: 'var(--bg-error)',  
        warning: 'var(--bg-warning)',  
        success: 'var(--bg-success)',  
      },  
      textColor: {  
        inverse: 'var(--text-inverse)',  
        foreground: 'var(--text-foreground)',  
        'foreground-muted': 'var(--text-foreground-muted)',  
        error: 'var(--text-error)',  
        primary: 'var(--text-primary)',  
        success: 'var(--text-success)',  
        warning: 'var(--text-warning)',  
        disabled: 'var(--text-disabled)',  
      },  
      backgroundColor: {  
        default: 'var(--bg-default)',  
        'default-hover': 'var(--bg-default-hover)',  
        'default-active': 'var(--bg-default-active)',  
        alternate: 'var(--bg-alternate)',  
        'alternate-hover': 'var(--bg-alternate-hover)',  
        'alternate-active': 'var(--bg-alternate-active)',  
        inverse: 'var(--bg-inverse)',  
        'inverse-hover': 'var(--bg-inverse-hover)',  
        'inverse-active': 'var(--bg-inverse-active)',  
        primary: 'var(--bg-primary)',  
        'primary-hover': 'var(--bg-primary-hover)',  
        'primary-active': 'var(--bg-primary-active)',  
        secondary: 'var(--bg-secondary)',  
        'secondary-hover': 'var(--bg-secondary-hover)',  
        'secondary-active': 'var(--bg-secondary-active)',  
        error: 'var(--bg-error)',  
        warning: 'var(--bg-warning)',  
        success: 'var(--bg-success)',  
      }, 
    }, 
  },
  plugins: [],
};

Next, copy the following in your css file.

@layer base {
  :root {
    --text-inverse: theme(colors.gray.50);
    --text-foreground: theme(colors.gray.950);
    --text-foreground-muted: theme(colors.gray.600);
    --text-error: theme(colors.rose.600);
    --text-primary: theme(colors.indigo.600);
    --text-success: theme(colors.lime.600);
    --text-warning: theme(colors.orange.600);
    --text-disabled: theme(colors.gray.400);
 
    --bg-default: theme(colors.gray.50);
    --bg-default-hover: theme(colors.gray.200);
    --bg-default-active: theme(colors.gray.300);
    --bg-alternate: theme(colors.gray.200);
    --bg-alternate-hover: theme(colors.gray.300);
    --bg-alternate-active: theme(colors.gray.400);
    --bg-inverse: theme(colors.gray.100);
    --bg-inverse-hover: theme(colors.gray.200);
    --bg-inverse-active: theme(colors.gray.300);
    --bg-primary: theme(colors.indigo.600);
    --bg-primary-hover: theme(colors.indigo.700);
    --bg-primary-active: theme(colors.indigo.800);
    --bg-secondary: theme(colors.slate.200);
    --bg-secondary-hover: theme(colors.slate.300);
    --bg-secondary-active: theme(colors.slate.400);
    --bg-error: theme(colors.rose.600);
    --bg-warning: theme(colors.orange.600);
    --bg-success: theme(colors.lime.300);
  }
}
 
// full dark mode support coming soon!

Lastly, import tailwind.css instead of styles.css at the root of your application.

import '@coinbase/onchainkit/tailwind.css';

tailwind.css includes anything that is not defined in tailwind.

That's it! From here, you can adjust global fonts and colors.