## Prerequisites > Actify is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation Guide. ## Install ## globals.css ```css @tailwind base; @tailwind components; @tailwind utilities; :root { --md-sys-color-background: 255 248 243; --md-sys-color-on-background: 32 27 18; --md-sys-color-surface: 255 248 243; --md-sys-color-surface-dim: 228 216 203; --md-sys-color-surface-bright: 255 248 243; --md-sys-color-surface-container-lowest: 255 255 255; --md-sys-color-surface-container-low: 254 242 228; --md-sys-color-surface-container: 248 236 222; --md-sys-color-surface-container-high: 243 230 216; --md-sys-color-surface-container-highest: 237 225 211; --md-sys-color-on-surface: 32 27 18; --md-sys-color-surface-variant: 242 225 201; --md-sys-color-on-surface-variant: 80 69 52; --md-sys-color-inverse-surface: 54 47 38; --md-sys-color-inverse-on-surface: 251 239 225; --md-sys-color-outline: 131 117 98; --md-sys-color-outline-variant: 213 196 174; --md-sys-color-shadow: 0 0 0; --md-sys-color-scrim: 0 0 0; --md-sys-color-surface-tint: 127 87 0; --md-sys-color-primary: 127 87 0; --md-sys-color-on-primary: 255 255 255; --md-sys-color-primary-container: 247 179 55; --md-sys-color-on-primary-container: 68 45 0; --md-sys-color-inverse-primary: 255 186 62; --md-sys-color-secondary: 118 90 43; --md-sys-color-on-secondary: 255 255 255; --md-sys-color-secondary-container: 255 220 169; --md-sys-color-on-secondary-container: 92 67 22; --md-sys-color-tertiary: 86 101 0; --md-sys-color-on-tertiary: 255 255 255; --md-sys-color-tertiary-container: 182 202 84; --md-sys-color-on-tertiary-container: 45 54 0; --md-sys-color-error: 186 26 26; --md-sys-color-on-error: 255 255 255; --md-sys-color-error-container: 255 218 214; --md-sys-color-on-error-container: 65 0 2; } ``` ## tailwind.config.js ```ts import { Config } from 'tailwindcss' const config: Config = { content: ['./src/**/*.{ts,tsx}'], theme: { extend: { colors: { background: 'rgb(var(--md-sys-color-background) / )', 'on-background': 'rgb(var(--md-sys-color-on-background) / )', surface: 'rgb(var(--md-sys-color-surface) / )', 'surface-dim': 'rgb(var(--md-sys-color-surface-dim) / )', 'surface-bright': 'rgb(var(--md-sys-color-surface-bright) / )', 'surface-container-lowest': 'rgb(var(--md-sys-color-surface-container-lowest) / )', 'surface-container-low': 'rgb(var(--md-sys-color-surface-container-low) / )', 'surface-container': 'rgb(var(--md-sys-color-surface-container) / )', 'surface-container-high': 'rgb(var(--md-sys-color-surface-container-high) / )', 'surface-container-highest': 'rgb(var(--md-sys-color-surface-container-highest) / )', 'on-surface': 'rgb(var(--md-sys-color-on-surface) / )', 'surface-variant': 'rgb(var(--md-sys-color-surface-variant) / )', 'on-surface-variant': 'rgb(var(--md-sys-color-on-surface-variant) / )', 'inverse-surface': 'rgb(var(--md-sys-color-inverse-surface) / )', 'inverse-on-surface': 'rgb(var(--md-sys-color-inverse-on-surface) / )', outline: 'rgb(var(--md-sys-color-outline) / )', 'outline-variant': 'rgb(var(--md-sys-color-outline-variant) / )', shadow: 'rgb(var(--md-sys-color-shadow) / )', scrim: 'rgb(var(--md-sys-color-scrim) / )', 'surface-tint': 'rgb(var(--md-sys-color-surface-tint) / )', primary: 'rgb(var(--md-sys-color-primary) / )', 'on-primary': 'rgb(var(--md-sys-color-on-primary) / )', 'primary-container': 'rgb(var(--md-sys-color-primary-container) / )', 'on-primary-container': 'rgb(var(--md-sys-color-on-primary-container) / )', 'inverse-primary': 'rgb(var(--md-sys-color-inverse-primary) / )', secondary: 'rgb(var(--md-sys-color-secondary) / )', 'on-secondary': 'rgb(var(--md-sys-color-on-secondary) / )', 'secondary-container': 'rgb(var(--md-sys-color-secondary-container) / )', 'on-secondary-container': 'rgb(var(--md-sys-color-on-secondary-container) / )', tertiary: 'rgb(var(--md-sys-color-tertiary) / )', 'on-tertiary': 'rgb(var(--md-sys-color-on-tertiary) / )', 'tertiary-container': 'rgb(var(--md-sys-color-tertiary-container) / )', 'on-tertiary-container': 'rgb(var(--md-sys-color-on-tertiary-container) / )', error: 'rgb(var(--md-sys-color-error) / )', 'on-error': 'rgb(var(--md-sys-color-on-error) / )', 'error-container': 'rgb(var(--md-sys-color-error-container) / )', 'on-error-container': 'rgb(var(--md-sys-color-on-error-container) / )' } } }, plugins: [] } export default config ``` ## Example ```jsx import { Button } from 'actify' export default () => { return } ```