This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
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;
}
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: "#FEF9C3",
200: "#FEF08A",
300: "#FDE047",
400: "#FACC15",
500: "#EAB308",
600: "#CA8A04",
700: "#A16207",
800: "#854D0E",
900: "#713F12",
},
},
},
},
};
export default config;