feat: add tailwind css

craco.config.js

@@ -30,4 +30,9 @@ module.exports = {
       },
     },
   ],
+  style: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
 };

package.json

@@ -84,13 +84,16 @@
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "@types/webpack-env": "^1.16.2",
+    "autoprefixer": "^9",
     "eslint": "^7.1.1",
     "eslint-config-airbnb-typescript-prettier": "^4.2.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-filenames": "^1.3.2",
     "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
+    "postcss": "^7",
     "prettier": "^2.4.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "webpack-bundle-analyzer": "^4.4.2"
   }
 }

src/components/atoms/Button/Button.tsx

@@ -2,15 +2,11 @@ import { memo } from "react";
 
 import { Button as AntdButton } from "antd";
 import { ButtonProps as AntdButtonProps } from "antd/es/button";
-import classnames from "classnames/bind";
+import cx from "classnames";
 import { Link, LinkProps } from "react-router-dom";
 
 import { isURL } from "@app/helpers/util.helper";
 
-import styles from "./Button.module.scss";
-
-const cx = classnames.bind(styles);
-
 interface ButtonProps extends Omit<AntdButtonProps, "href"> {
   /**
    * Turn button into link, accepts internal and external links (optional)
@@ -27,8 +23,8 @@ const Button = memo(({ to, className, noPadding, ...rest }: ButtonProps) => {
 
   const buttonContent = (
     <AntdButton
-      className={cx(styles.button, className, {
-        noPadding,
+      className={cx(className, {
+        "p-0": noPadding,
       })}
       {...(isExternalLink && {
         href: to as string,

src/components/layouts/ContentLayout/ContentLayout.module.scss

@@ -1,17 +1,12 @@
 @import "styles/colors";
 @import "styles/variables";
 
-.container {
-  height: 100%;
-}
-
 .content {
-  background: $bg-white;
-  padding: $spacing-6;
-  margin: 0 $spacing-6 $spacing-6;
+  @apply bg-white p-6 mt-0 mx-6 mb-6;
 }
 
 .pageHeader {
+  margin-bottom: theme("spacing.6"); // @apply mb-6; // valid as well
   :global {
     .ant-page-header-footer .ant-tabs .ant-tabs-tab {
       font-size: $font-size-14;
@@ -28,8 +23,3 @@
     }
   }
 }
-
-.pageHeader,
-.filters {
-  margin-bottom: $spacing-6;
-}

src/components/layouts/ContentLayout/ContentLayout.tsx

@@ -33,7 +33,7 @@ const ContentLayout = memo(
     };
 
     return (
-      <Layout className={styles.container}>
+      <Layout className="h-full">
         <PageHeader
           ghost={false}
           {...header}
@@ -43,9 +43,7 @@ const ContentLayout = memo(
           }}
           className={cx(styles.pageHeader, header.className)}
         />
-        {filters && (
-          <div className={cx(styles.filters, styles.content)}>{filters}</div>
-        )}
+        {filters && <div className={cx("mb-6", styles.content)}>{filters}</div>}
         <Content className={cx({ [styles.content]: !noContentStyle })}>
           {children}
         </Content>

src/index.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "styles/colors";
 
 body {

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  mode: "jit",
+  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};