apply global style correctly

.storybook/preview.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { GlobalStyles, theme } from 'twin.macro';
+import { theme } from 'twin.macro';
+import GlobalStyles from '../src/styles/GlobalStyles';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 

src/styles/GlobalStyles.tsx

@@ -1,18 +1,20 @@
+import React from 'react';
 import { Global, css } from '@emotion/react';
 import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro';
 
-const customStyles = css({
-  body: {
-    WebkitTapHighlightColor: theme`colors.purple.500`,
-    ...tw`antialiased`,
-  },
-});
+const customStyles = css`
+  :root {
+    font-size: 16px;
+    -webkit-tap-highlight-color: transparent;
+    ${tw`antialiased font-sans`},
+  }
+`;
 
 const GlobalStyles = () => (
-  <>
+  <React.Fragment>
     <BaseStyles />
     <Global styles={customStyles} />
-  </>
+  </React.Fragment>
 );
 
 export default GlobalStyles;