src/util/fetcher.ts

+import { request } from 'graphql-request';
+import type { Variables } from 'graphql-request/dist/types';
+
+const fetcher = <T, V extends Variables>(query: string, variables?: V): Promise<T> =>
+  request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query, variables);
+
+export default fetcher;

src/util/file.ts

+export const validateFile = (
+  file: File,
+  allowedSize = 5000000,
+  allowedExtensions = ['jpg', 'jpeg', 'png'],
+): boolean => {
+  const { name: fileName, size: fileSize } = file;
+
+  const fileExtension = fileName.split('.').pop();
+  if (fileExtension && !allowedExtensions.includes(fileExtension.toLowerCase())) {
+    return false;
+  } else if (fileSize > allowedSize) {
+    return false;
+  }
+  return true;
+};

tailwind.config.js

 module.exports = {
-  purge: [],
+  mode: 'jit',
+  purge: ['./src/**/*.html', './src/**/*.tsx'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
@@ -7,5 +8,9 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
-}
+  plugins: [
+    require('@tailwindcss/forms')({
+      strategy: 'class',
+    }),
+  ],
+};