🔧 config: using sass

:%s

src/components/common/Header/Header.module.css

@@ -1,5 +0,0 @@
-/* style demo here */
-
-.header {
-  color: green;
-}

src/components/common/Header/Header.module.scss

@@ -0,0 +1,12 @@
+.header {
+  .button {
+    @apply font-bold py-2 px-4 rounded;
+  }
+  .btnBlue {
+    @apply bg-blue hover:bg-cyan text-white font-bold py-2 px-4;
+    border-radius: theme("borderRadius.custom");
+  }
+  .link {
+    color: theme("colors.pink");
+  }
+}

src/components/common/Header/Header.tsx

@@ -1,14 +1,22 @@
-import { FC, useRef, useEffect } from 'react'
-import s from './Header.module.css'
+import { FC } from 'react'
+import s from './Header.module.scss'
 
 interface Props {
     className?: string
     children?: any
 }
 
-const Header: FC<Props> = ({ }) => {
+const Header: FC<Props> = ({ }:Props ) => {
     return (
-        <div className={s.header}>This is Header</div>
+        <div className={s.header}>
+            This is Header
+            <button className={s.btnBlue}>
+                Button
+            </button>
+            <div className={s.link}>
+                Test link style
+            </div>
+        </div>
     )
 }