[misc][x]: add custom font sizes

components/home/Nav.tsx

@@ -49,7 +49,7 @@ export default function Nav() {
         </a>
         <a
           href="https://github.com/datopian/portal"
-          className="inline-block text-sm px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
+          className="inline-block text-tiny px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
           target="_blank"
         >
           GitHub

pages/_app.tsx

@@ -4,7 +4,7 @@ import { useApollo } from '../lib/apolloClient';
 import { DEFAULT_THEME } from '../themes';
 import { applyTheme } from '../themes/utils';
 
-import './App.css';
+import '../styles/app.css';
 
 export default function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps.initialApolloState);

tailwind.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   theme: {
+    fontSize: {
+      tiny: 'var(--font-size-small)',
+      md: 'var(--font-size-medium)',
+      lg: 'var(--font-size-large)',
+    },
     extend: {
       colors: {
         primary: 'var(--color-primary)',
@@ -18,5 +23,8 @@ module.exports = {
   variants: {
     backgroundColor: ['active'],
   },
-  plugins: [],
+  plugins: ['font-size'],
+  corePlugins: {
+    fontSize: true,
+  },
 };

themes/base.ts

@@ -5,4 +5,9 @@ export default {
   positive: '#0C0C0C',
   textPrimary: '#896A00',
   backgroundPrimary: '#FAEEC5',
+
+  // Define font size variables
+  fontSmall: '18px',
+  fontMedium: '30px',
+  fontLarge: '45px',
 };

themes/utils.ts

@@ -21,6 +21,9 @@ export const mapTheme = (variables: ITheme): IMappedTheme => {
     '--color-text-primary': variables.textPrimary || '',
     '--background-primary': variables.backgroundPrimary || '',
     '--background-sec': variables.backgroundSecondary || '',
+    '--font-size-small': variables.fontSmall || '18px',
+    '--font-size-medium': variables.fontMedium || '30px',
+    '--font-size-large': variables.fontLarge || '45px',
   };
 };