feat(web): integrate Tailwind CSS for styling and add PostCSS configuration

Author: tyler-dane

packages/web/package.json

@@ -60,6 +60,7 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.16.0",
     "@faker-js/faker": "^9.6.0",
+    "@tailwindcss/postcss": "^4.1.14",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -73,6 +74,7 @@
     "@types/react-redux": "^7.1.18",
     "@types/react-select": "^5.0.1",
     "@types/styled-components": "^5.1.14",
+    "autoprefixer": "^10.4.21",
     "babel-jest": "^29.3.1",
     "babel-plugin-styled-components": "^2.0.2",
     "eslint-plugin-jest-dom": "^4.0.3",
@@ -84,6 +86,9 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.0.5",
     "msw": "^1.0.1",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
+    "tailwindcss": "^4.1.14",
     "ts-key-enum": "^2.0.12",
     "typescript-plugin-css-modules": "^5.0.1",
     "webpack": "^5.76.0",

packages/web/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

packages/web/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

packages/web/src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+import "./index.css";
 
 const container = document.getElementById("root");
 const root = createRoot(container);

packages/web/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./src/index.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

packages/web/webpack.config.js

@@ -83,7 +83,18 @@ module.exports = (env, argv) => {
         // css/scss
         {
           test: /\.css/,
-          use: [styleLoader, "css-loader"],
+          use: [
+            styleLoader,
+            "css-loader",
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  config: path.resolve(__dirname, "postcss.config.js"),
+                },
+              },
+            },
+          ],
         },
 
         {