This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
We are using 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: "#FFFAC2",
200: "#FFF299",
300: "#FFE766",
400: "#FFDB33",
500: "#FFCC00",
600: "#FFB700",
700: "#FF9F00",
800: "#E68A00",
900: "#B36B00",
},
},
},
},
};
export default config;
Last Updated: 08 Oct, 2024