🔧 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>
     )
 }
 

src/styles/_utility.scss

@@ -0,0 +1 @@
+// utility css here

src/styles/chrome-bug.css

@@ -1,12 +0,0 @@
-/**
- * Chrome has a bug with transitions on load since 2012!
- *
- * To prevent a "pop" of content, you have to disable all transitions until
- * the page is done loading.
- *
- * https://lab.laukstein.com/bug/input
- * https://twitter.com/timer150/status/1345217126680899584
- */
-body.loading * {
-  transition: none !important;
-}

src/styles/main.css

@@ -1,6 +0,0 @@
-@tailwind base;
-@import './base.css';
-
-@tailwind components;
-
-@tailwind utilities;

src/styles/main.scss

@@ -0,0 +1,5 @@
+@import "~tailwindcss/base";
+@import './base';
+@import "~tailwindcss/components";
+@import "~tailwindcss/utilities";
+@import 'utility'