Add Tailwind CSS configuration to info and container apps

apps/container/postcss.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+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/container/project.json

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

apps/container/src/components/social-links/index.tsx

@@ -1,23 +1,23 @@
 const socialLinks = [
   {
-    name: 'LinkedIn',
+    name: '🔗 LinkedIn',
     url: 'https://www.linkedin.com/in/serifcolakel/',
   },
   {
-    name: 'Twitter',
+    name: '🔗 Twitter',
     url: 'https://twitter.com/ColakelSerif',
   },
 ];
 
 export default function SocialLinks() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'row' }}>
+    <div className="flex flex-row divide-x-2 md:w-1/3 w-full divide-black justify-center items-center border py-4 rounded-lg bg-white">
       {socialLinks.map(({ name, url }) => (
         <a
+          className="px-4 hover:underline text-primary-400 text-xl"
           href={url}
           key={name}
           rel="noreferrer"
-          style={{ display: 'block', margin: '10px' }}
           target="_blank"
         >
           {name}

apps/container/src/pages/home/index.tsx

@@ -2,19 +2,17 @@ import SocialLinks from '../../components/social-links';
 
 export default function HomePage() {
   return (
-    <div
-      style={{
-        height: '90vh',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#f0f0f0',
-      }}
-    >
-      <h1>Welcome to the Container!</h1>
-      <p>This is the container app that consumes the remote app info.</p>
-      <p>It was created with the Nx plugin for Webpack 5.</p>
+    <div className="h-[90vh] flex flex-col justify-center items-center bg-gray-100 gap-y-4 w-full">
+      <p className="text-[200px] animate-wiggle">🌍</p>
+      <h1 className="text-primary text-4xl font-bold">
+        Welcome to the Container!
+      </h1>
+      <p className="text-lg text-primary-400">
+        This is the container app that consumes the remote app info.
+      </p>
+      <p className="text-lg text-gray-400">
+        It was created with the Nx plugin for Webpack 5.
+      </p>
       <SocialLinks />
     </div>
   );

apps/container/src/styles.css

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

apps/container/tailwind.config.js

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const { join } = require('path');
+const baseConfig = require('../../tailwind.base.config');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    ...(baseConfig?.content || []),
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+    // INFO : Add the following line to include the tailwind styles from the info
+    ...createGlobPatternsForDependencies(join(__dirname, 'apps/info')),
+  ],
+  ...baseConfig,
+};

apps/info/postcss.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+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/info/project.json

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

apps/info/src/app/app.tsx

@@ -1,9 +1,17 @@
 export function App() {
   return (
-    <div>
+    <main>
       <h1>Welcome to info!</h1>
       <p>This is a remote app that is part of the Nx plugin for Webpack 5.</p>
-    </div>
+      <section className="bg-gray-50 shadow-sm p-4 rounded-lg">
+        <h2 className="text-4xl font-bold text-center border-b-4 border-b-primary py-[41px]">
+          <p className="animate-wiggle p-8 text-primary-700">Info</p>
+        </h2>
+        <p className="text-lg text-center my-[41px]">
+          This app is a remote app that is part of the Nx plugin for Webpack 5.
+        </p>
+      </section>
+    </main>
   );
 }
 

apps/info/src/styles.css

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

apps/info/tailwind.config.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const { join } = require('path');
+const baseConfig = require('../../tailwind.base.config');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    ...(baseConfig?.content || []),
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  ...baseConfig,
+};

package.json

@@ -39,6 +39,7 @@
     "@swc/cli": "~0.1.62",
     "@swc/core": "~1.3.85",
     "@swc/helpers": "~0.5.2",
+    "@tailwindcss/forms": "^0.5.7",
     "@testing-library/react": "14.0.0",
     "@types/jest": "^29.4.0",
     "@types/node": "18.14.2",
@@ -49,6 +50,7 @@
     "@vitejs/plugin-react": "~4.0.0",
     "@vitest/coverage-c8": "~0.32.0",
     "@vitest/ui": "~0.32.0",
+    "autoprefixer": "10.4.13",
     "babel-jest": "^29.4.1",
     "cypress": "^13.0.0",
     "eslint": "~8.46.0",
@@ -69,6 +71,7 @@
     "jsdom": "~22.1.0",
     "netlify-cli": "^16.6.1",
     "nx": "17.0.1",
+    "postcss": "8.4.21",
     "prettier": "^2.6.2",
     "react-refresh": "^0.10.0",
     "tailwindcss": "3.2.7",