feat: setup TailwindCSS (#934)

* Install TailwindCSS dependencies

* Initialize TailwindCSS

* Pointing PostCSS to our tailwind config files

* Apply configuration to libraries and configure paths

* Import TailwindCSS styles

* Add Nx utility function for TailwindCSS purging

apps/redi-connect/postcss.config.js

@@ -0,0 +1,10 @@
+const { join } = require('path')
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+}

apps/redi-connect/tailwind.config.js

@@ -0,0 +1,13 @@
+const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind')
+const { join } = require('path')
+
+module.exports = {
+  content: [
+    join(__dirname, './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

apps/redi-talent-pool/postcss.config.js

@@ -0,0 +1,10 @@
+const { join } = require('path')
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+}

apps/redi-talent-pool/tailwind.config.js

@@ -0,0 +1,13 @@
+const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind')
+const { join } = require('path')
+
+module.exports = {
+  content: [
+    join(__dirname, './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

libs/shared-atomic-design-components/src/lib/styles/_tailwind.scss

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

libs/shared-atomic-design-components/src/lib/styles/global.scss

@@ -24,6 +24,9 @@
 @import '_fonts';
 @import '_forms';
 
+// directives for Tailwind’s layers
+@import '_tailwind';
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

package.json

@@ -181,6 +181,7 @@
     "@types/yup": "0.26.24",
     "@typescript-eslint/eslint-plugin": "5.10.2",
     "@typescript-eslint/parser": "5.10.2",
+    "autoprefixer": "^10.4.19",
     "babel-jest": "27.2.3",
     "babel-loader": "8.1.0",
     "css-loader": "4.3.0",
@@ -196,12 +197,14 @@
     "eslint-plugin-react-hooks": "4.3.0",
     "jest": "27.2.3",
     "nx": "13.9.7",
+    "postcss": "^8.4.39",
     "prettier": "2.6.2",
     "prettier-eslint": "^12.0.0",
     "react-test-renderer": "17.0.2",
     "rimraf": "^5.0.5",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
+    "tailwindcss": "^3.4.4",
     "ts-jest": "27.0.5",
     "ts-node": "~9.1.1",
     "typescript": "4.6.3",

workspace.json

@@ -146,7 +146,8 @@
             },
             "extractCss": true,
             "scripts": [],
-            "webpackConfig": "@nrwl/react/plugins/webpack"
+            "webpackConfig": "@nrwl/react/plugins/webpack",
+            "postcssConfig": "apps/redi-connect/postcss.config.js"
           },
           "configurations": {
             "production": {
@@ -259,7 +260,8 @@
             },
             "extractCss": true,
             "scripts": [],
-            "webpackConfig": "apps/redi-talent-pool/custom-webpack-config.js"
+            "webpackConfig": "apps/redi-talent-pool/custom-webpack-config.js",
+            "postcssConfig": "apps/redi-connect/postcss.config.js"
           },
           "configurations": {
             "production": {