footer and init project

tailwind/custom/base.css

@@ -7,5 +7,13 @@
  * file and is applied both to the front end and in the block editor.
  */
 body {
-	@apply bg-background text-foreground font-sans;
+	@apply bg-background font-sans;
+}
+
+footer {
+	@apply bg-secondary w-full text-white;
+
+	.footer-menu {
+		@apply mb-4 flex flex-col gap-4 md:flex-row md:justify-center md:gap-8;
+	}
 }

tailwind/tailwind-theme.css

@@ -44,6 +44,9 @@
 		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
 		"Liberation Mono", "Courier New", monospace;
 
+	--font-barlow: "Barlow", sans-serif;
+	--font-montserrat: "Montserrat", sans-serif;
+	--font-roboto: "Roboto", sans-serif;
 	/**
 	 * Add your theme below:
 	 */

tailwind/tailwind-typography.config.js

@@ -18,6 +18,18 @@ const hexToRgb = (hex) => {
 };
 
 module.exports = {
+	safelist: [
+		'w-full',
+		'text-primary',
+		'text-secondary',
+		'text-tertiary',
+		'text-background',
+		'size-13',
+		'w-1/4',
+		'font-barlow',
+		'font-roboto',
+		'font-montserrat',
+	],
 	theme: {
 		extend: {
 			typography: (theme) => ({

tailwind/tailwind-typography.css

@@ -10,3 +10,5 @@
 
 @plugin "@_tw/typography";
 @config "./tailwind-typography.config.js";
+
+@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");