Add Tailwind and PostCSS support

package.json

@@ -25,6 +25,7 @@
     "@types/chrome": "^0.0.202",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "autoprefixer": "^10.4.17",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^9.1.2",
     "babel-preset-react-app": "^10.0.1",
@@ -42,13 +43,16 @@
     "fs-extra": "^11.1.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
+    "postcss": "^8.4.35",
+    "postcss-loader": "^8.1.0",
     "prettier": "^2.8.3",
     "react-refresh": "^0.14.0",
     "react-refresh-typescript": "^2.0.7",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "source-map-loader": "^3.0.1",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.4.2",
     "type-fest": "^3.5.2",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}

src/pages/Options/Options.tsx

@@ -1,12 +1,35 @@
-import React from 'react';
-import './Options.css';
+import React from 'react'
+import './Options.css'
 
 interface Props {
-  title: string;
+  title: string
 }
 
 const Options: React.FC<Props> = ({ title }: Props) => {
-  return <div className="OptionsContainer">{title} Page</div>;
-};
+  return (
+    <>
+      <section className='bg-gray-900 text-white'>
+        <div className='mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center'>
+          <div className='mx-auto max-w-3xl text-center'>
+            <h1 className='my-auto p-4 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-3xl font-extrabold text-transparent sm:text-5xl'>
+              Welcome to
+              <span className='sm:block'>the Settings page</span>
+            </h1>
 
-export default Options;
+            <p className='mx-auto max-w-xl sm:text-xl/relaxed'>
+              Edit src/pages/Options/Options.tsx and save to reload.
+            </p>
+
+            <div className='mt-8 flex flex-wrap justify-center gap-4'>
+              <p className='text-4xl text-blue-400'>
+                This page was styled with Tailwindcss
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Options

src/pages/Options/index.css

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

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/**/*.{html,js,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

webpack.config.js

@@ -73,7 +73,9 @@ var options = {
             options: {
               sourceMap: true,
             },
-          },
+          }, {
+            loader: 'postcss-loader'
+          }
         ],
       },
       {