added tailwind to frontend

apps/frontend/postcss.config.js

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

apps/frontend/project.json

@@ -19,7 +19,8 @@
         "styles": ["apps/frontend/src/styles.scss"],
         "scripts": [],
         "isolatedConfig": true,
-        "webpackConfig": "apps/frontend/webpack.config.js"
+        "webpackConfig": "apps/frontend/webpack.config.js",
+        "postcssConfig": "apps/frontend/postcss.config.js"
       },
       "configurations": {
         "development": {

apps/frontend/src/styles.scss

@@ -1 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 /* You can add global styles to this file, and also import other style files */

apps/frontend/tailwind.config.js

@@ -0,0 +1,17 @@
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package.json

@@ -72,6 +72,7 @@
     "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitest/ui": "^0.32.0",
+    "autoprefixer": "10.4.13",
     "babel-jest": "^29.4.1",
     "babel-plugin-styled-components": "1.10.7",
     "cypress": "^12.11.0",
@@ -88,10 +89,12 @@
     "jsdom": "~22.1.0",
     "nx": "16.4.0",
     "nx-cloud": "latest",
+    "postcss": "8.4.21",
     "prettier": "^2.6.2",
     "prisma": "^4.16.1",
     "react-refresh": "^0.10.0",
     "sass": "^1.55.0",
+    "tailwindcss": "3.2.7",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
     "typescript": "~5.1.3",