From 84cd830c892c7ef4eb00d448c1aecf3713f626e0 Mon Sep 17 00:00:00 2001
From: AlexBarmen <www.lad282@gmail.com>
Date: Wed, 26 Jul 2023 22:22:10 +0300
Subject: [PATCH] added tailwind to frontend

---
 apps/frontend/postcss.config.js  | 15 +++++++++++++++
 apps/frontend/project.json       |  3 ++-
 apps/frontend/src/styles.scss    |  3 +++
 apps/frontend/tailwind.config.js | 17 +++++++++++++++++
 package.json                     |  3 +++
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/postcss.config.js
 create mode 100644 apps/frontend/tailwind.config.js

diff --git a/apps/frontend/postcss.config.js b/apps/frontend/postcss.config.js
new file mode 100644
index 0000000..c72626d
--- /dev/null
+++ b/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: {},
+  },
+};
diff --git a/apps/frontend/project.json b/apps/frontend/project.json
index 942d5d0..9481407 100644
--- a/apps/frontend/project.json
+++ b/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": {
diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss
index 90d4ee0..844323d 100644
--- a/apps/frontend/src/styles.scss
+++ b/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 */
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
new file mode 100644
index 0000000..e1cf7ce
--- /dev/null
+++ b/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: [],
+};
diff --git a/package.json b/package.json
index fb74682..ee86e45 100644
--- a/package.json
+++ b/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",