style fix footer and container, build

add tailwind purging from future
footer not fixed otherwise overlaps
add container to create pages

Signed-off-by: Lakshya Singh <[email protected]>

Author: king-11

components/footer.tsx

@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 export default function Footer() {
   return (
     <motion.footer
-      className="text-sm md:text-base flex md:flex-row flex-col justify-around items-center bg- h-14 md:h-12 text-white fixed bottom-0 w-full border-white border-t-2"
+      className="text-sm md:text-base flex md:flex-row flex-col justify-around items-center h-14 md:h-12 text-white border-white border-t-2 container mx-auto"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
     >

pages/create.tsx

@@ -4,7 +4,7 @@ import Footer from "components/footer";
 import GitHubNav from "components/githubNav";
 import Loader from "components/loader";
 import { IBook } from "graphql/book";
-import Head from 'next/head';
+import Head from "next/head";
 import { FormEvent, useState } from "react";
 
 export interface IBookLite extends Omit<IBook, "images"> {
@@ -53,7 +53,7 @@ export default function Create() {
         <title>Add Book</title>
       </Head>
       <GitHubNav />
-      <div className="flex md:flex-row flex-col container mx-auto md:justify-around items-center px-auto">
+      <div className="flex md:flex-row flex-col container mx-auto md:justify-around items-center container">
         <div className="md:order-2 lg:max-w-lg md:max-w-sm max-w-xs">
           <img
             src="/images/bookart.jpg"

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

tailwind.config.js

@@ -1,11 +1,14 @@
-const colors = require('tailwindcss/colors')
+const colors = require("tailwindcss/colors");
 
 module.exports = {
   purge: [
     "./components/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./hooks/**/*.{js,ts,jsx,tsx}",
   ],
+  future: {
+    purgeLayersByDefault: true,
+  },
   presets: [],
   darkMode: "class", // or 'media' or 'class'
   theme: {
@@ -33,7 +36,7 @@ module.exports = {
       amber: colors.amber,
       rose: colors.rose,
       blue: colors.blue,
-      cyan: colors.cyan
+      cyan: colors.cyan,
     },
     spacing: {
       px: "1px",