Tailwindcss Integration Guide
OnchainKit comes with first class support for tailwindcss
.
Use default OnchainKit's style
You can use the default styles without any customization. Just place this at the top of your application's entry point to have the components work out of the box.
import '@coinbase/onchainkit/styles.css';
TailwindCSS Config
Depending on your dark mode setup, you may have to add safelist: ['dark']
to your tailwind config.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{ts,tsx}'],
darkMode: ['class'],
safelist: ['dark'],
theme: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
plugins: [],
};
Toggling light / dark mode
There are many ways to handle color mode.
In OnchainKit, toggling color mode works by adding / removing class name dark
to the root html tag.
Colorscheme override
To override default colorscheme, you need to modify the following css variables:
@tailwind base;
@layer base {
:root {
--ock-text-inverse: theme(colors.gray.50);
--ock-text-foreground: theme(colors.gray.950);
--ock-text-foreground-muted: theme(colors.gray.600);
--ock-text-error: theme(colors.rose.600);
--ock-text-primary: theme(colors.indigo.600);
--ock-text-success: theme(colors.lime.600);
--ock-text-warning: theme(colors.orange.600);
--ock-text-disabled: theme(colors.gray.400);
--ock-bg-default: theme(colors.gray.50);
--ock-bg-default-hover: theme(colors.gray.200);
--ock-bg-default-active: theme(colors.gray.300);
--ock-bg-alternate: theme(colors.gray.200);
--ock-bg-alternate-hover: theme(colors.gray.300);
--ock-bg-alternate-active: theme(colors.gray.400);
--ock-bg-inverse: theme(colors.gray.100);
--ock-bg-inverse-hover: theme(colors.gray.200);
--ock-bg-inverse-active: theme(colors.gray.300);
--ock-bg-primary: theme(colors.indigo.600);
--ock-bg-primary-hover: theme(colors.indigo.700);
--ock-bg-primary-active: theme(colors.indigo.800);
--ock-bg-secondary: theme(colors.slate.200);
--ock-bg-secondary-hover: theme(colors.slate.300);
--ock-bg-secondary-active: theme(colors.slate.400);
--ock-bg-error: theme(colors.rose.600);
--ock-bg-warning: theme(colors.orange.600);
--ock-bg-success: theme(colors.lime.300);
--ock-bg-default-reverse: theme(colors.gray.950);
}
.dark {
--ock-text-inverse: theme(colors.gray.950);
--ock-text-foreground: theme(colors.gray.50);
--ock-text-foreground-muted: theme(colors.gray.400);
--ock-text-error: theme(colors.rose.400);
--ock-text-primary: theme(colors.indigo.400);
--ock-text-success: theme(colors.lime.400);
--ock-text-warning: theme(colors.orange.400);
--ock-text-disabled: theme(colors.gray.600);
--ock-bg-default: theme(colors.gray.950);
--ock-bg-default-hover: theme(colors.gray.800);
--ock-bg-default-active: theme(colors.gray.700);
--ock-bg-alternate: theme(colors.gray.800);
--ock-bg-alternate-hover: theme(colors.gray.700);
--ock-bg-alternate-active: theme(colors.gray.600);
--ock-bg-inverse: theme(colors.gray.900);
--ock-bg-inverse-hover: theme(colors.gray.800);
--ock-bg-inverse-active: theme(colors.gray.700);
--ock-bg-primary: theme(colors.indigo.400);
--ock-bg-primary-hover: theme(colors.indigo.300);
--ock-bg-primary-active: theme(colors.indigo.200);
--ock-bg-secondary: theme(colors.slate.800);
--ock-bg-secondary-hover: theme(colors.slate.700);
--ock-bg-secondary-active: theme(colors.slate.600);
--ock-bg-error: theme(colors.rose.400);
--ock-bg-warning: theme(colors.orange.400);
--ock-bg-success: theme(colors.lime.700);
--ock-bg-default-reverse: theme(colors.gray.50);
}
}