refactor: improvement config postcss and tailwind, organized theme

postcss.config.js

@@ -1,10 +1,10 @@
 /** @type {import('postcss-load-config').Config} */
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
     'postcss-import': {},
     'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
     ...(process.env.NODE_ENV !== 'production' ? { cssnano: {} } : {})
   }
 }

src/app/global-error.tsx

@@ -3,7 +3,7 @@
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 
-import quicksand from 'theme/fontFamily'
+import quicksand from 'theme/variables/fontFamily'
 
 import 'theme/globals.css'
 import S from './styles.module.scss'

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from 'next'
 import type { ReactNode } from 'react'
 
-import quicksand from 'theme/fontFamily'
+import quicksand from 'theme/variables/fontFamily'
 
 import { CookieWarning, PopupInstallPwa, Toast } from 'components/molecules'
 import { BottomBar, Footer, TopBar } from 'components/organisms'

src/theme/globals.css

@@ -1,154 +1,5 @@
-@tailwind base;
-
-@layer base {
-  * {
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    font-family:
-      var(--font-quicksand),
-      system-ui,
-      -apple-system,
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Open Sans',
-      'Helvetica Neue',
-      sans-serif;
-    line-height: calc(1em + 0.5rem);
-    text-decoration: none;
-    -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale !important;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    body *,
-    body *::before,
-    body *::after {
-      transition-delay: -1ms !important;
-      transition-duration: 1ms !important;
-      animation-duration: 1ms !important;
-      animation-delay: -1ms !important;
-      animation-iteration-count: 1 !important;
-      background-attachment: initial !important;
-      scroll-behavior: auto !important;
-    }
-  }
-
-  html {
-    font-size: 62.5%;
-  }
-
-  #__next {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    min-height: 100vh;
-  }
-
-  body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    justify-content: flex-start;
-    background-color: rgba(245, 245, 255, 1);
-    color: rgba(14, 12, 27, 1);
-    isolation: isolate;
-
-    @media (max-width: 640px) {
-      padding-bottom: 50px;
-    }
-  }
-
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    word-break: break-word;
-  }
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  optgroup,
-  body,
-  input,
-  select,
-  textarea,
-  button {
-    margin: 0;
-    font-family: var(--font-quicksand);
-    font-size: 1.6rem;
-    font-weight: 500;
-  }
-
-  button {
-    border: 0;
-    cursor: pointer;
-  }
-
-  a,
-  a:active {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  :focus,
-  :focus-visible {
-    outline: 4px solid rgba(0, 125, 250, 0.6);
-    outline-offset: 1px;
-  }
-
-  :focus:not(:focus-visible) {
-    outline: 0;
-    box-shadow: none;
-  }
-
-  mark {
-    &::before,
-    &::after {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      white-space: nowrap;
-      clip: rect(1px, 1px, 1px, 1px);
-      clip-path: inset(100%);
-      content: ' [start of highlighted text] ';
-    }
-
-    &::after {
-      content: ' [end of highlighted text] ';
-    }
-  }
-
-  ::-webkit-scrollbar,
-  scrollbar-width {
-    width: 12px !important;
-    background-color: rgba(245, 245, 255, 1);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 1px solid rgba(245, 245, 255, 1);
-    border-radius: 20px;
-    background-color: rgba(160, 166, 198, 1);
-  }
-
-  :root {
-    scrollbar-color: rgba(160, 166, 198, 1) rgba(245, 245, 255, 1) !important;
-    scrollbar-width: 12px !important;
-  }
-}
+@import 'reset.css';
 
+@tailwind base;
 @tailwind components;
 @tailwind utilities;

src/theme/reset.css

@@ -0,0 +1,149 @@
+@layer base {
+  * {
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family:
+      var(--font-quicksand),
+      system-ui,
+      -apple-system,
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Oxygen',
+      'Ubuntu',
+      'Cantarell',
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+    line-height: calc(1em + 0.5rem);
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    body *,
+    body *::before,
+    body *::after {
+      transition-delay: -1ms !important;
+      transition-duration: 1ms !important;
+      animation-duration: 1ms !important;
+      animation-delay: -1ms !important;
+      animation-iteration-count: 1 !important;
+      background-attachment: initial !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  html {
+    font-size: 62.5%;
+  }
+
+  #__next {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    min-height: 100vh;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: flex-start;
+    background-color: rgba(245, 245, 255, 1);
+    color: rgba(14, 12, 27, 1);
+    isolation: isolate;
+
+    @media (max-width: 640px) {
+      padding-bottom: 50px;
+    }
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    word-break: break-word;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  optgroup,
+  body,
+  input,
+  select,
+  textarea,
+  button {
+    margin: 0;
+    font-family: var(--font-quicksand);
+    font-size: 1.6rem;
+    font-weight: 500;
+  }
+
+  button {
+    border: 0;
+    cursor: pointer;
+  }
+
+  a,
+  a:active {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :focus,
+  :focus-visible {
+    outline: 4px solid rgba(0, 125, 250, 0.6);
+    outline-offset: 1px;
+  }
+
+  :focus:not(:focus-visible) {
+    outline: 0;
+    box-shadow: none;
+  }
+
+  mark {
+    &::before,
+    &::after {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      white-space: nowrap;
+      clip: rect(1px, 1px, 1px, 1px);
+      clip-path: inset(100%);
+      content: ' [start of highlighted text] ';
+    }
+
+    &::after {
+      content: ' [end of highlighted text] ';
+    }
+  }
+
+  ::-webkit-scrollbar,
+  scrollbar-width {
+    width: 12px !important;
+    background-color: rgba(245, 245, 255, 1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 1px solid rgba(245, 245, 255, 1);
+    border-radius: 20px;
+    background-color: rgba(160, 166, 198, 1);
+  }
+
+  :root {
+    scrollbar-color: rgba(160, 166, 198, 1) rgba(245, 245, 255, 1) !important;
+    scrollbar-width: 12px !important;
+  }
+}

tailwind.config.ts

@@ -12,7 +12,7 @@ import {
   boxShadow,
   borderRadius,
   screens
-} from './src/theme'
+} from './src/theme/variables'
 import { utilities } from './src/theme/utilities'
 import { components } from './src/theme/components'