Example of twin inside an nx-workplace

nx-workspace-emotion/jest.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  projects: ['<rootDir>/apps/web', '<rootDir>/libs/shared-ui'],
+  projects: [
+    '<rootDir>/apps/web',
+    '<rootDir>/libs/shared-ui',
+    '<rootDir>/libs/tailwind-config',
+  ],
 };

nx-workspace-emotion/libs/shared-ui/babel-plugin-macros.config.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { resolve } = require('path');
+
+module.exports = {
+  twin: {
+    preset: 'emotion',
+    config: resolve(__dirname, 'tailwind.config.js'),
+  },
+};

nx-workspace-emotion/libs/shared-ui/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@nrwl/react/babel', '@emotion/babel-preset-css-prop'],
+  plugins: ['babel-plugin-macros'],
+};

nx-workspace-emotion/libs/shared-ui/src/lib/Button/Button.tsx

@@ -14,7 +14,10 @@ export const Button = styled.button(
     tw`transform transition-transform duration-75`,
 
     // Use the variant grouping feature to add variants to multiple classes
-    tw`hocus:(scale-105 text-yellow-400)`,
+    tw`hover:(scale-105)`,
+
+    // Custom color from custom tailwind config
+    tw`hover:(text-zabadoo)`,
 
     // Use props to conditionally style your components
     isPrimary && tw`bg-black text-white border-black`,

nx-workspace-emotion/libs/shared-ui/tailwind.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require('../tailwind-config')],
+};

nx-workspace-emotion/libs/tailwind-config/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "rules": {}
+}

nx-workspace-emotion/libs/tailwind-config/README.md

@@ -0,0 +1,7 @@
+# tailwind-config
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test tailwind-config` to execute the unit tests via [Jest](https://jestjs.io).

nx-workspace-emotion/libs/tailwind-config/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  displayName: 'tailwind-config',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/tailwind-config',
+};

nx-workspace-emotion/libs/tailwind-config/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@nx-workspace-emotion/tailwind-config",
+  "version": "0.0.1",
+  "main": "src/index.js"
+}

nx-workspace-emotion/libs/tailwind-config/src/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable no-undef */
+module.exports = require('./lib/theme');

nx-workspace-emotion/libs/tailwind-config/src/lib/theme.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        zabadoo: 'blue',
+      },
+    },
+  },
+};

nx-workspace-emotion/libs/tailwind-config/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

nx-workspace-emotion/libs/tailwind-config/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

nx-workspace-emotion/libs/tailwind-config/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

nx-workspace-emotion/nx.json

@@ -15,5 +15,9 @@
       "options": { "cacheableOperations": ["build", "lint", "test", "e2e"] }
     }
   },
-  "projects": { "web": { "tags": [] }, "shared-ui": { "tags": [] } }
+  "projects": {
+    "web": { "tags": [] },
+    "shared-ui": { "tags": [] },
+    "tailwind-config": { "tags": [] }
+  }
 }

nx-workspace-emotion/package.json

@@ -51,6 +51,7 @@
     "@nrwl/jest": "11.2.12",
     "@nrwl/linter": "11.2.12",
     "@nrwl/next": "11.2.12",
+    "@nrwl/node": "^11.4.0",
     "@nrwl/react": "11.2.12",
     "@nrwl/tao": "11.2.12",
     "@nrwl/web": "11.2.12",

nx-workspace-emotion/tsconfig.base.json

@@ -15,7 +15,10 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@my-twin-project/shared-ui": ["libs/shared-ui/src/index.ts"]
+      "@my-twin-project/shared-ui": ["libs/shared-ui/src/index.ts"],
+      "@nx-workspace-emotion/tailwind-config": [
+        "libs/tailwind-config/src/index.ts"
+      ]
     }
   },
   "exclude": ["node_modules", "tmp"]

nx-workspace-emotion/workspace.json

@@ -99,6 +99,46 @@
           }
         }
       }
+    },
+    "tailwind-config": {
+      "root": "libs/tailwind-config",
+      "sourceRoot": "libs/tailwind-config/src",
+      "projectType": "library",
+      "targets": {
+        "lint": {
+          "executor": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/tailwind-config/**/*.ts"
+            ]
+          }
+        },
+        "test": {
+          "executor": "@nrwl/jest:jest",
+          "outputs": [
+            "coverage/libs/tailwind-config"
+          ],
+          "options": {
+            "jestConfig": "libs/tailwind-config/jest.config.js",
+            "passWithNoTests": true
+          }
+        },
+        "build": {
+          "executor": "@nrwl/node:package",
+          "outputs": [
+            "{options.outputPath}"
+          ],
+          "options": {
+            "outputPath": "dist/libs/tailwind-config",
+            "tsConfig": "libs/tailwind-config/tsconfig.lib.json",
+            "packageJson": "libs/tailwind-config/package.json",
+            "main": "libs/tailwind-config/src/index.ts",
+            "assets": [
+              "libs/tailwind-config/*.md"
+            ]
+          }
+        }
+      }
     }
   }
 }