🔧 config: using sass

:%s

package.json

@@ -43,6 +43,7 @@
     "react-fast-marquee": "^1.1.4",
     "react-merge-refs": "^1.1.0",
     "react-use-measure": "^2.0.4",
+    "sass": "^1.38.0",
     "swell-js": "^4.0.0-next.0",
     "swr": "^0.5.6",
     "tabbable": "^5.2.0",
@@ -68,6 +69,7 @@
     "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^14.0.2",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.3.0",
     "typescript": "4.3.4"

pages/_app.tsx

@@ -1,5 +1,4 @@
-import '../src/styles/main.css'
+import '../src/styles/main.scss'
-import '../src/styles/chrome-bug.css'
 import 'keen-slider/keen-slider.min.css'
 
 import { FC, useEffect } from 'react'

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 { FC } from 'react'
-import s from './Header.module.css'
+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'

tailwind.config.js

@@ -64,6 +64,10 @@ module.exports = {
       scale: {
         120: '1.2',
       },
+      borderRadius: {
+        custom: '50% 20% / 10% 40%;',
+      }
     },
   },
+  plugins: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer') ]
 }

yarn.lock

@@ -1839,7 +1839,7 @@ chokidar@3.5.1:
   optionalDependencies:
     fsevents "~2.3.1"
 
-chokidar@^3.5.1:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
   integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
@@ -4459,6 +4459,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -4623,6 +4628,15 @@ postcss-image-set-function@^3.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-import@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1"
+  integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-initial@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.4.tgz#9d32069a10531fe2ecafa0b6ac750ee0bc7efc53"
@@ -4807,7 +4821,7 @@ postcss-value-parser@^3.3.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -5055,6 +5069,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
 readable-stream@^2.0.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -5188,7 +5209,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.20.0:
+resolve@^1.1.7, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -5278,6 +5299,13 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.38.0:
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
+  integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"