tailwindcss

config-overrides.js

@@ -0,0 +1,22 @@
+module.exports = {
+    webpack: function (config, env) {
+
+        config.module.rules.push({
+            test: /\.css$/,
+            use: [
+                {
+                    loader: 'postcss-loader',
+                    options: {
+                        ident: 'postcss',
+                        plugins: [
+                            require('tailwindcss'),
+                            require('autoprefixer'),
+                        ],
+                    },
+                },
+            ]
+        });
+
+        return config;
+    }
+};

package.json

@@ -17,14 +17,17 @@
     "fetch-mock": "^9.3.1",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "node-fetch": "^2.6.0",
+    "postcss-loader": "^3.0.0",
     "qs": "^6.9.3",
     "react": "^16.13.1",
+    "react-app-rewired": "^2.1.5",
     "react-dom": "^16.13.1",
     "react-hook-form": "^5.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2",
+    "tailwindcss": "^1.2.0",
     "typescript": "~3.8.3"
   },
   "browserslist": {
@@ -49,9 +52,9 @@
     ]
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test --env=jest-environment-jsdom-sixteen",
+    "eject": "react-app-rewired eject"
   }
 }

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'semantic-ui-css/semantic.min.css';
 import './index.css';
+import './tailwind.css';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}