Styling

Colors

Here are some color palettes you can try. You can click each color palette to see how it looks.

Border radius

5px

Box shadow

Horizontal offset

4px

Vertical offset

4px

Font weight

Headings

700

Everything else

500

Adding styling to your project

You can choose either CSS variables or utility classes. Using CSS variables means using single class for both light mode and dark mode styling e.g. text-text. Using utility classes means using double classes e.g.text-text dark:text-darkText.

CSS Variables installation

1. Add this to index.css

index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  
:root {
  --main: #88aaee;
  --overlay: rgba(0, 0, 0, 0.8); /* background color overlay for alert dialogs, modals, etc. */

  --bg: #dfe5f2;
  --bw: #fff; /* white and secondary black e.g. utility class variant would be: bg-[#fff] dark:bg-[#212121] */
  --blank: #000; /* blank black and white */
  --border: #000;
  --text: #000;
  --mtext: #000; /* text that is placed on background with main color e.g. text color of default button */
  --ring: #000;
  --ring-offset: #fff;

  --border-radius: 5px;
  --box-shadow-x: 4px;
  --box-shadow-y: 4px;
  --reverse-box-shadow-x: -4px;
  --reverse-box-shadow-y: -4px;
  --base-font-weight: 500;
  --heading-font-weight: 700;

  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);
}

.dark {
  --bg: #272933;
  --bw: #212121;
  --blank: #fff;
  --border: #000;
  --text: #e6e6e6;
  --mtext: #000;
  --ring: #fff;
  --ring-offset: #000;

  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);
}

2. Copy this to theme section inside your tailwind config

tailwind.config.js
theme: {
  extend: {
    colors: {
      main: 'var(--main)',
      overlay: 'var(--overlay)',
      bg: 'var(--bg)',
      bw: 'var(--bw)',
      blank: 'var(--blank)',
      text: 'var(--text)',
      mtext: 'var(--mtext)',
      border: 'var(--border)',
      ring: 'var(--ring)',
      ringOffset: 'var(--ring-offset)',
      
      secondaryBlack: '#212121', 
    },
    borderRadius: {
      base: '5px'
    },
    boxShadow: {
      shadow: 'var(--shadow)'
    },
    translate: {
      boxShadowX: '4px',
      boxShadowY: '4px',
      reverseBoxShadowX: '-4px',
      reverseBoxShadowY: '-4px',
    },
    fontWeight: {
      base: '500',
      heading: '700',
    },
  },
},

Fonts

On resources page you have a small list of free fonts you can use for your next neobrutalism project.

Edit this page