style: added Inter font for use with Tailwind UI

4 years ago · c6474558f1
parent 46eec85264
commit c6474558f1
2 changed files with 42 additions and 1 deletions
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -0,0 +1,35 @@
 import React from 'react';
 import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
 } from 'next/document';
 class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }
  render(): JSX.Element {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
 }
 export default MyDocument;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +1,14 @@
 /* eslint-disable */
 const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
  purge: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
-    extend: {},
+    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [