Install & Configure

Statik UI is built on top of TailwindCSS. The first step in using Statik UI is installing it!

Statik UI uses a couple of additions to the default Tailwind config. The easiest way to get started is to just copy our entire config:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  
  theme: {
    fontFamily: {
      sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
    },
    extend: {
      borderRadius: {
        lg: '1rem',
      },
      boxShadow: {
        outline: '0 0 0 4px rgb(102, 126, 234, 0.5)',
        'outline-dark': '0 0 0 4px rgb(0, 0, 0, 0.2)',
        'outline-light': '0 0 0 4px rgb(255, 255, 255, 0.2)',
      },
      spacing: {
        '2/3': '66.666667%',
        '1/2': '50%',
      },
      animation: {
        '-translate-100': '-translate-100 30s linear infinite',
      },
      keyframes: {
        '-translate-100': {
          '0%': { transform: 'translate3d(0, 0, 0)' },
          '100%': { transform: 'translate3d(0, -50%, 0)' },
        },
      },
      backgroundOpacity: {
        15: '0.15',
      },
    },
  },
  variants: {
    backgroundColor: [
      'responsive',
      'hover',
      'focus',
      'disabled',
      'focus-within',
      'group-hover',
    ],
    textColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    opacity: [
      'responsive',
      'hover',
      'focus',
      'disabled',
      'group-hover',
      'group-focus',
    ],
    width: ['responsive', 'group-hover', 'group-focus'],
    translate: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'group-focus',
    ],
    scale: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'group-focus',
    ],
    boxShadow: ['responsive', 'hover', 'focus', 'active', 'focus-within'],
    borderColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    borderRadius: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'group-focus',
    ],
    backgroundOpacity: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
    ],
  },
}

Install Font

The last thing to do is include the Montserrat font. It's a free font from Google Fonts. You can include it either in your CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

Or in your HTML Head:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

Join Us 🤘