leon · April 21, 2023 07:04 · Dec 14, 2021 · Dec 14, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Tailwind 3 has jit mode a purge built in.
+# Tailwind 3 has jit mode and purge built in.
 
 So we only need to specify a list of globs to the `content` prop of the tailwind.config.js
 

diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# Tailwind 3 has jit mode a purge built in.
+
+So we only need to specify a list of globs to the `content` prop of the tailwind.config.js
+
+`@nrwl/workspace` contains a function called `createGlobPatternsForDependencies` which can generate an array of globs that you can pass to tailwind.
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "tailwindcss": "3.0.2",
+    "autoprefixer": "10.4.0",
+    "postcss": "^8.4.5",
+    "postcss-import": "^14.0.2"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,18 @@
+// in apps/myapp/postcss.config.js
+
+const { join } = require('path')
+
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+
+    // if using .css files, and we want to use css ne
+    'tailwindcss/nesting': {},
+
+    // pass in the local tailwind config
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+}
diff --git a/tailwind-workspace-preset.js b/tailwind-workspace-preset.js
@@ -0,0 +1,18 @@
+module.exports = {
+  // since we already have our own resets for both app and view, we don't use the tailwind preflight reset
+  corePlugins: {
+    preflight: false,
+  },
+
+  // we also enable !important, because we often need to override materials base css, and without it, we will have to add ! to every statement anyways
+  important: true,
+  content: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,45 @@
+// in apps/myapp/tailwind.config.js
+
+const { join } = require('path')
+const colors = require('tailwindcss/colors')
+
+const {
+  createGlobPatternsForDependencies,
+} = require('@nrwl/workspace/src/utilities/generate-globs')
+
+/**
+ * Generates a set of glob patterns based off the source root of the app and its dependencies
+ * @param dirPath workspace relative directory path that will be used to infer the parent project and dependencies
+ * @param fileGlobPattern pass a custom glob pattern to be used
+ */
+function createGlobPatternsForDependenciesLocal(
+  dirPath,
+  fileGlobPattern = '/**/!(*.stories|*.spec).{html,ts}',
+) {
+  try {
+    return createGlobPatternsForDependencies(dirPath, fileGlobPattern)
+  } catch {
+    console.warn(
+      '\n[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns\n',
+    )
+    return []
+  }
+}
+
+module.exports = {
+  presets: [require('../../tailwind-workspace-preset.js')],
+  content: [
+    // look for source files in the app folder
+    join(__dirname, 'app/**/*.{html,ts}'),
+    // but then also look for source files in all the libs that the app depends on 
+    ...createGlobPatternsForDependenciesLocal(__dirname),
+  ],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}
No results found