Finished converting current CSS to Tailwind

src/components/Chronology/ChronologyItemComponent.tsx

@@ -1,20 +1,14 @@
 import { GetChronologyItemsQuery } from "graphql/operations-types";
-import styles from "styles/Chronology/ChronologyItemComponent.module.css";
 
 export type ChronologyItemComponentProps = {
-  item: GetChronologyItemsQuery['chronologyItems']['data'][number];
+  item: GetChronologyItemsQuery["chronologyItems"]["data"][number];
   displayYear: boolean;
 };
 
 export default function ChronologyItemComponent(
   props: ChronologyItemComponentProps
 ): JSX.Element {
-  function generateAnchor(
-    year: number,
-    month: number,
-    day: number,
-    event?: number
-  ): string {
+  function generateAnchor(year: number, month: number, day: number): string {
     let result: string = "";
     result += year;
     if (month) result += "-" + month.toString().padStart(2, "0");
@@ -59,7 +53,7 @@ export default function ChronologyItemComponent(
 
   return (
     <div
-      className={styles.chronologyItem}
+      className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid"
       id={generateAnchor(
         props.item.attributes.year,
         props.item.attributes.month,
@@ -67,7 +61,7 @@ export default function ChronologyItemComponent(
       )}
     >
       {props.displayYear ? (
-        <p className={styles.year}>
+        <p className="text-lg font-bold">
           {generateYear(
             props.item.attributes.displayed_date,
             props.item.attributes.year
@@ -77,13 +71,13 @@ export default function ChronologyItemComponent(
         ""
       )}
 
-      <p className={styles.date}>
+      <p className="col-start-1 text-dark text-sm">
         {generateDate(props.item.attributes.month, props.item.attributes.day)}
       </p>
 
-      <div className={styles.events}>
+      <div className="col-start-2 row-start-1 row-span-2">
         {props.item.attributes.events.map((event) => (
-          <div className={styles.event} key={event.id}>
+          <div className="m-0" key={event.id}>
             {event.translations.map((translation) => (
               <>
                 {translation.title ? <h3>{translation.title}</h3> : ""}
@@ -91,7 +85,9 @@ export default function ChronologyItemComponent(
                 {translation.description ? (
                   <p
                     className={
-                      event.translations.length > 1 ? styles.bulletItem : ""
+                      event.translations.length > 1
+                        ? "before:content-['-'] before:text-dark before:inline-block before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line"
+                        : "whitespace-pre-line"
                     }
                   >
                     {translation.description}
@@ -107,7 +103,7 @@ export default function ChronologyItemComponent(
               </>
             ))}
 
-            <p className={styles.source}>
+            <p className="text-dark text-xs">
               {event.source.data
                 ? "(" + event.source.data.attributes.name + ")"
                 : "(WARNING: NO SOURCE!)"}

src/components/Chronology/ChronologyYearComponent.tsx

@@ -1,4 +1,3 @@
-import styles from "styles/Chronology/ChronologyYearComponent.module.css";
 import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
 import { GetChronologyItemsQuery } from "graphql/operations-types";
 
@@ -12,7 +11,7 @@ export default function ChronologyYearComponent(
 ): JSX.Element {
   return (
     <div
-      className={styles.chronologyYear}
+      className="target:bg-mid rounded-2xl target:py-4 target:my-4"
       id={props.items.length > 1 ? props.year.toString() : undefined}
     >
       {props.items.map((item, index) => (

src/components/Panels/ContentPanel.tsx

@@ -1,13 +1,22 @@
 type ContentPanelProps = {
   children: React.ReactNode;
+  autoformat?: boolean;
 };
 
 export default function ContentPanel(props: ContentPanelProps): JSX.Element {
-  return (
-    <div className="w-full grid overflow-y-scroll max-h-screen py-20 px-10">
-      <main className="prose lg:prose-lg place-self-center text-justify">
-        {props.children}
-      </main>
-    </div>
-  );
+  if (props.autoformat) {
+    return (
+      <div className="w-full grid overflow-y-scroll max-h-screen py-20 px-10">
+        <main className="prose place-self-center text-justify">
+          {props.children}
+        </main>
+      </div>
+    );
+  } else {
+    return (
+      <div className="w-full grid overflow-y-scroll max-h-screen py-20 px-10">
+        <main className="place-self-center text-justify">{props.children}</main>
+      </div>
+    );
+  }
 }

src/components/Panels/MainPanel.tsx

@@ -1,15 +1,17 @@
 import Link from "next/link";
-import styles from "styles/Panels/MainPanel.module.css";
-import panelStyles from "styles/Panels/Panels.module.css";
 import NavOption from "components/Panels/NavOption";
 
 export default function MainPanel(): JSX.Element {
   return (
-    <div className={`${panelStyles.panel} ${styles.panel}`}>
+    <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black w-80 h-full max-h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
       <Link href="/" passHref>
-        <div className={styles.topLogo}>
-          <img src="/icons/accords.svg" alt="" />
-          <h2>Accord&apos;s Library</h2>
+        <div className="grid place-items-center cursor-pointer">
+          <img
+            className="w-1/2 self-start justify-center"
+            src="/icons/accords.svg"
+            alt=""
+          />
+          <h2 className="mt-4">Accord&apos;s Library</h2>
         </div>
       </Link>
 
@@ -70,9 +72,21 @@ export default function MainPanel(): JSX.Element {
         </p>
         <a href="https://creativecommons.org/licenses/by-sa/4.0/">
           <div className="mt-4 mb-8 grid h-4 grid-flow-col place-content-center gap-1">
-            <img className="h-6" src="/icons/creative-commons-brands.svg" alt="" />
-            <img className="h-6" src="/icons/creative-commons-by-brands.svg" alt="" />
-            <img className="h-6" src="/icons/creative-commons-sa-brands.svg" alt="" />
+            <img
+              className="h-6"
+              src="/icons/creative-commons-brands.svg"
+              alt=""
+            />
+            <img
+              className="h-6"
+              src="/icons/creative-commons-by-brands.svg"
+              alt=""
+            />
+            <img
+              className="h-6"
+              src="/icons/creative-commons-sa-brands.svg"
+              alt=""
+            />
           </div>
         </a>
         <p>
@@ -80,12 +94,12 @@ export default function MainPanel(): JSX.Element {
           ENIX CO. LTD. All game assets and promotional materials belongs to ©
           SQUARE ENIX CO. LTD.
         </p>
-        <div className={styles.menuFooterSocials}>
+        <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
           <a href="https://github.com/Accords-Library">
-            <img src="/icons/github-brands.svg" alt="" />
+            <img className="h-8" src="/icons/github-brands.svg" alt="" />
           </a>
           <a href="https://accords-library.com/discord">
-            <img src="/icons/discord-brands.svg" alt="" />
+            <img className="h-8" src="/icons/discord-brands.svg" alt="" />
           </a>
         </div>
       </div>

src/components/Panels/NavOption.tsx

@@ -1,28 +1,39 @@
 import { useRouter } from "next/router";
-import styles from "styles/Panels/NavOption.module.css";
 import Link from "next/link";
 
 type NavOptionProps = {
   url: string;
   icon?: string;
-  title: string | null | undefined;
+  title: string;
   subtitle?: string;
   border?: boolean;
 };
 
-export default function NavOption(pageProps: NavOptionProps): JSX.Element {
+export default function NavOption(props: NavOptionProps): JSX.Element {
   const router = useRouter();
-  let classNames = [styles.menuOption];
-  if (router.asPath.startsWith(pageProps.url)) classNames.push(styles.active);
-  if (pageProps.icon) classNames.push(styles.icon);
-  if (pageProps.border === true) classNames.push(styles.border);
-  return (
-    <Link href={pageProps.url} passHref>
-      <div className={classNames.join(" ")}>
-        {pageProps.icon && <img src={pageProps.icon} alt="" />}
-        <h3>{pageProps.title}</h3>
-        {pageProps.subtitle && <p>{pageProps.subtitle}</p>}
-      </div>
-    </Link>
-  );
+  const isActive = router.asPath.startsWith(props.url);
+  const divActive = "bg-mid"
+  const border = "border-2 border-mid";
+  const divCommon = `gap-x-4 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid transition-colors ${props.border ? border: ""} ${isActive ? divActive : ""}`;
+
+  if (props.icon) {
+    return (
+      <Link href={props.url} passHref>
+        <div className={`grid grid-cols-[auto_1fr] text-left ${divCommon}`}>
+          <img className="w-5" src={props.icon} alt="" />
+          <h3 className="text-2xl">{props.title}</h3>
+          {props.subtitle && <p className="col-start-2">{props.subtitle}</p>}
+        </div>
+      </Link>
+    );
+  } else {
+    return (
+      <Link href={props.url} passHref>
+        <div className={`grid text-center ${divCommon}`}>
+          <h3 className="text-2xl">{props.title}</h3>
+          {props.subtitle && <p>{props.subtitle}</p>}
+        </div>
+      </Link>
+    );
+  }
 }

src/components/Panels/ReturnButton.tsx

@@ -1,4 +1,3 @@
-import styles from "styles/Panels/ReturnButton.module.css";
 import Link from "next/link";
 
 type ReturnButtonProps = {

src/components/Panels/SubPanel.tsx

@@ -1,13 +1,10 @@
-import styles from "styles/Panels/SubPanel.module.css";
-import panelStyles from "styles/Panels/Panels.module.css";
-
 type SubPanelProps = {
   children: React.ReactNode;
 };
 
 export default function SubPanel(props: SubPanelProps): JSX.Element {
   return (
-    <div className={[panelStyles.panel, styles.panel].join(" ")}>
+    <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] border-r-[1px] overflow-y-scroll border-black w-80 h-full max-h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
       {props.children}
     </div>
   );

src/graphql/operations-types.ts

@@ -1,7 +1,41 @@
-export type GetErasQueryVariables = {
-  language_code: string;
+export type Exact<T> = T;
+export type InputMaybe<T> = T;
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  JSON: any;
+  DateTime: any;
+  Time: any;
+  Upload: any;
+  LibraryContentRangeDynamicZoneInput: any;
+  LibraryItemMetadataDynamicZoneInput: any;
+  SourceSourceDynamicZoneInput: any;
 };
 
+/*
+  The following is generated using https://www.graphql-code-generator.com/
+  With the following codegen.yml:
+
+  generates:
+  operations-types.ts:
+    plugins:
+      - typescript-operations
+
+  And the schema.graphql and operation.graphql files from this folder.
+  
+  But to make the type easier to work with, it went through the following transformation:
+    - Removed ?
+    - Removed | null
+    - Removed | undefined
+*/
+
+export type GetErasQueryVariables = Exact<{
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
+
 export type GetErasQuery = {
   __typename: "Query";
   chronologyEras: {
@@ -23,9 +57,9 @@ export type GetErasQuery = {
   };
 };
 
-export type GetChronologyItemsQueryVariables = {
-  language_code: string;
-};
+export type GetChronologyItemsQueryVariables = Exact<{
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
 
 export type GetChronologyItemsQuery = {
   __typename: "Query";
@@ -66,9 +100,9 @@ export type GetChronologyItemsQuery = {
   };
 };
 
-export type GetLibraryItemsPreviewQueryVariables = {
-  language_code: string;
-};
+export type GetLibraryItemsPreviewQueryVariables = Exact<{
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
 
 export type GetLibraryItemsPreviewQuery = {
   __typename: "Query";
@@ -133,9 +167,9 @@ export type GetLibraryItemsPreviewQuery = {
   };
 };
 
-export type GetLibraryItemsSkeletonQueryVariables = {
+export type GetLibraryItemsSkeletonQueryVariables = Exact<{
   [key: string]: never;
-};
+}>;
 
 export type GetLibraryItemsSkeletonQuery = {
   __typename: "Query";
@@ -181,10 +215,10 @@ export type GetLibraryItemsSkeletonQuery = {
   };
 };
 
-export type GetLibraryItemQueryVariables = {
-  slug: string;
-  language_code: string;
-};
+export type GetLibraryItemQueryVariables = Exact<{
+  slug: InputMaybe<Scalars["String"]>;
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
 
 export type GetLibraryItemQuery = {
   __typename: "Query";
@@ -213,14 +247,12 @@ export type GetLibraryItemQuery = {
             };
           };
         };
-
         release_date: {
           __typename: "ComponentBasicsDatepicker";
           year: number;
           month: number;
           day: number;
         };
-
         price: {
           __typename: "ComponentBasicsPrice";
           amount: number;
@@ -236,22 +268,16 @@ export type GetLibraryItemQuery = {
             };
           };
         };
-
         size: {
           __typename: "ComponentBasicsSize";
           width: number;
           height: number;
           thickness: number;
         };
-
-        descriptions: Array<
-          | {
-              __typename: "ComponentTranslationsLibraryItems";
-              description: string;
-            }
-          | undefined
-        >;
-
+        descriptions: Array<{
+          __typename: "ComponentTranslationsLibraryItems";
+          description: string;
+        }>;
         subitems: {
           __typename: "LibraryItemRelationResponseCollection";
           data: Array<{
@@ -270,13 +296,9 @@ export type GetLibraryItemQuery = {
                     __typename: "UploadFile";
                     name: string;
                     alternativeText: string;
-
                     caption: string;
-
                     width: number;
-
                     height: number;
-
                     url: string;
                   };
                 };

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import type { AppProps } from "next/app";
 import MainPanel from "components/Panels/MainPanel";
-import "styles/index.css";
+import "tailwind.css";
 import "@fontsource/zen-maru-gothic/500.css";
 import "@fontsource/vollkorn/700.css";
 
@@ -17,23 +17,19 @@ export function applyCustomAppProps(
 }
 
 export default function AccordsLibraryApp(appProps: AppProps) {
-  // Apply a different style depending on the given CustomAppProps
-  let mainClasses = "grid min-h-screen grid-flow-col";
-  if (
-    appProps.Component.customAppProps.useSubPanel &&
-    appProps.Component.customAppProps.useContentPanel
-  ) {
-    mainClasses += " grid-cols-appUseSubContent";
-  } else if (appProps.Component.customAppProps.useSubPanel) {
-    mainClasses += " grid-cols-appUseSub";
-  } else if (appProps.Component.customAppProps.useContentPanel) {
-    mainClasses += " grid-cols-appUseContent";
-  } else {
-    mainClasses += " grid-cols-appDefault";
-  }
-
   return (
-    <div className={mainClasses}>
+    <div
+      className={
+        appProps.Component.customAppProps.useSubPanel &&
+        appProps.Component.customAppProps.useContentPanel
+          ? "grid grid-cols-[20rem_20rem_1fr]"
+          : appProps.Component.customAppProps.useSubPanel
+          ? "grid grid-cols-[20rem_20rem]"
+          : appProps.Component.customAppProps.useContentPanel
+          ? "grid grid-cols-[20rem_1fr]"
+          : "grid grid-cols-[20rem]"
+      }
+    >
       <MainPanel />
       <appProps.Component {...appProps.pageProps} />
     </div>

src/pages/index.tsx

@@ -13,7 +13,7 @@ export default function Home(): JSX.Element {
       <Head>
         <title>Accord&rsquo;s Library - Home</title>
       </Head>
-      <ContentPanel>
+      <ContentPanel autoformat={true}>
         <h2>Discover • Analyse • Translate • Archive</h2>
         <h2>What is this?</h2>
         <p>

src/styles/Chronology/ChronologyItemComponent.module.css

@@ -1,66 +0,0 @@
-.chronologyItem {
-    display: grid;
-    grid-template-areas:
-        "year events"
-        "date events"
-        ;
-    grid-column-gap: 1em;
-    place-content: start;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 4em;
-    padding: 1em 2em;
-}
-
-.chronologyItem:target {
-    background-color: var(--color-main-base);
-    border-radius: 1em;
-}
-
-.chronologyItem > .year {
-    grid-area: year;
-    margin: 0;
-    font-weight: bold;
-    font-size: 1.3em;
-    margin-top: -0.25em;
-}
-
-.chronologyItem > .date {
-    grid-area: date;
-    margin: 0;
-    color: var(--color-main-dark);
-    font-size: 0.9em;
-}
-
-.chronologyItem > .events {
-    grid-area: events;
-}
-
-.event > h3 {
-    margin: 0;
-}
-
-.event > p {
-    margin: 0;
-    white-space: break-spaces;
-}
-
-.event > .bulletItem::before {
-    content: "⁃";
-    color: var(--color-main-dark);
-    display: inline-block;
-    width: 1em;
-    margin-left: -1em
-}
-
-.event > .bulletItem {
-    margin-top: .5em;
-}
-
-.event ~ .event {
-    margin-top: 1em;
-}
-
-.source {
-    color: var(--color-main-dark);
-    font-size: 80%;
-}

src/styles/Chronology/ChronologyYearComponent.module.css

@@ -1,5 +0,0 @@
-.chronologyYear:target {
-    background-color: var(--color-main-base);
-    border-radius: 1em;
-    padding: 1em 2em 1em 1.5em;
-}

src/styles/Library/LibraryItemComponent.module.css

@@ -1,3 +0,0 @@
-.libraryItem {
-    cursor: pointer;
-}

src/styles/Panels/ContentPanel.module.css

@@ -1,15 +0,0 @@
-.panel {
-    padding-top: 5rem;
-    scrollbar-width: thin;
-    border: none;
-}
-
-.panelInside {
-    max-width: 50rem;
-    text-align: justify;
-    text-justify: inter-word;
-}
-
-.panel::-webkit-scrollbar {
-    display: unset;
-}

src/styles/Panels/MainPanel.module.css

@@ -1,59 +0,0 @@
-.topLogo {
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.topLogo > h2 {
-  margin-top: 1rem;
-}
-
-.topLogo > img {
-  width: 50%;
-  height: auto;
-  place-self: start center;
-}
-
-.menuFooter {
-  text-align: center;
-}
-
-.menuFooterCC {
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-  display: grid;
-  height: 1rem;
-  grid-auto-flow: column;
-  place-content: center;
-  grid-gap: .2rem;
-}
-
-.menuFooterCC img {
-  height: 1.5rem;
-  width: auto;
-}
-
-.menuFooterCC:hover img {
-  filter: var(--filter-color-main-dark);
-}
-
-
-.menuFooterSocials {
-  margin-top: 3rem;
-  margin-bottom: 1rem;
-  display: grid;
-  height: 1rem;
-  grid-auto-flow: column;
-  place-content: center;
-  grid-gap: 2rem;
-}
-
-.menuFooterSocials img {
-  height: 2rem;
-  width: auto;
-  transition: .1s filter;
-}
-
-.menuFooterSocials img:hover {
-  filter: var(--filter-color-main-dark);
-}

src/styles/Panels/NavOption.module.css

@@ -1,46 +0,0 @@
-.menuOption {
-    display: grid;
-    grid-template-areas: 'title' 'subtitle';
-    align-items: center;
-    border-radius: 1em;
-    grid-column-gap: 1em;
-    cursor: pointer;
-    padding: 0.6em 1.2em;
-    width: 100%;
-    transition: .1s background-color;
-    text-align: center;    
-}
-
-.menuOption.icon {
-    grid-template-areas: 'icon title' '. subtitle';
-    grid-template-columns: auto 1fr;
-    text-align: start;
-}
-
-.menuOption.border {
-    border: 1px solid var(--color-main-base);
-}
-
-
-.menuOption:hover, .menuOption.active {
-    background-color: var(--color-main-base);
-}
-
-.menuOption > * {
-    margin: 0;
-}
-
-.menuOption > img {
-    width: 1.2em;
-    height: auto;
-    grid-area: icon;
-}
-
-.menuOption > h3 {
-    grid-area: title;
-    font-size: 150%;
-}
-
-.menuOption > p {
-    grid-area: subtitle;
-}

src/styles/Panels/Panels.module.css

@@ -1,25 +0,0 @@
-.panel {
-  display: grid;
-  border-right: 1px solid black;
-  height: 100%;
-  max-height: 100vh;
-  justify-items: center;
-  padding: 2rem;
-  overflow-y: auto;
-  grid-row-gap: 0.5em;
-  place-content: start center;
-  scrollbar-width: none;
-  scroll-behavior: smooth;
-}
-
-.panel::-webkit-scrollbar {
-  display: none;
-}
-
-.panel > hr {
-  height: 0;
-  width: 100%;
-  border: none;
-  border-top: 0.3rem dotted black;
-  margin: 2rem;
-}

src/styles/Panels/SubPanel.module.css

@@ -1,3 +0,0 @@
-.panel {
-    width: 20rem;
-}

src/tailwind.css

@@ -11,6 +11,16 @@
     color: var(--color-main-black);
   }
 
+  /* HORIZONTAL LINE */
+  
+  hr {
+    height: 0;
+    width: 100%;
+    border: none;
+    border-top: 0.3rem dotted black;
+    margin: 2rem;
+  }
+
   /* BUTTONS */
 
   button {
@@ -66,6 +76,7 @@
   * {
     scrollbar-color: theme("colors.dark") transparent;
     scrollbar-width: thin;
+    scroll-behavior: smooth;
   }
 
   *::selection {
@@ -91,4 +102,6 @@
     border-radius: 100vmax; /* roundness of the scroll thumb */
     border: 3px solid theme("colors.light"); /* creates padding around scroll thumb */
   }
-}
+
+
+}

tailwind.config.js

@@ -1,22 +1,23 @@
+const plugin = require('tailwindcss/plugin');
+
 module.exports = {
   content: ["./src/**/*.{tsx,ts}"],
   theme: {
     colors: {
       light: "#ffedd8",
-      base: "#e6ccb2",
+      mid: "#e6ccb2",
       dark: "#9c6644",
       black: "#1B1811",
     },
-    extend: {
-      gridTemplateColumns: {
-        appDefault: "20rem",
-        appUseSub: "20rem 20rem",
-        appUseContent: "20rem 1fr",
-        appUseSubContent: "20rem 20rem 1fr",
-      },
-    },
   },
   plugins: [
     require("@tailwindcss/typography"),
+    plugin(function({ addVariant, e }) {
+      addVariant('webkit-scrollbar', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`webkit-scrollbar${separator}${className}`)}::-webkit-scrollbar`
+        })
+      })
+    })
   ],
 };