Getting Started

This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.

1. Add the fonts

We are useing Archivo Black for headings and Share Tech for everything else.

Installation form Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap" rel="stylesheet">

Save the fonts in global.css:

:root {
  --font-head: "Archivo Black", sans-serif;
  --font-sans: "Share Tech", sans-serif;
}

2. Add the theme to your tailwind.config.js file.

import type { Config } from "tailwindcss";

const config = {
  theme: {
    extend: {
      fontFamily: {
        head: ["var(--font-head)"],
        sans: ["var(--font-sans)"],
      },
      boxShadow: {
        "xs": "1px 1px 0 0 #000",
        "md": "3px 3px 0 0 #000",
        "3xl": "10px 10px 0 0 #000",
      },
      colors: {
        primary: {
          50: "#FFFEF0",
          100: "#FFFAC2",
          200: "#FFF299",
          300: "#FFE766",
          400: "#FFDB33",
          500: "#FFCC00",
          600: "#FFB700",
          700: "#FF9F00",
          800: "#E68A00",
          900: "#B36B00",
        },
      },
    },
  },
};
export default config;

3. Now start copy-pasting the components!

Last Updated: 29 Sep, 2024

import type { Config } from "tailwindcss";

const config = {
  theme: {
    extend: {
      fontFamily: {
        head: ["var(--font-head)"],
        sans: ["var(--font-sans)"],
      },
      boxShadow: {
        "xs": "1px 1px 0 0 #000",
        "md": "3px 3px 0 0 #000",
        "3xl": "10px 10px 0 0 #000",
      },
      colors: {
        primary: {
          50: "#FFFEF0",
          100: "#FFFAC2",
          200: "#FFF299",
          300: "#FFE766",
          400: "#FFDB33",
          500: "#FFCC00",
          600: "#FFB700",
          700: "#FF9F00",
          800: "#E68A00",
          900: "#B36B00",
        },
      },
    },
  },
};
export default config;