NX tailwind 3 setup

README.md

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

@nrwl/workspace contains a function called createGlobPatternsForDependencies which can generate an array of globs that you can pass to tailwind.

package.json

{
  "devDependencies": {
    "tailwindcss": "3.0.2",
    "autoprefixer": "10.4.0",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.2"
  }
}

postcss.config.js

// 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: {},
  },
}

tailwind-workspace-preset.js

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: [],
}

tailwind.config.js

// 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: [],
}

this still doesn't work for me, __dirname is my top level workspace name, and then createGlobPatternsForDependencies seems to want a project name.

It always fails with [createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns...

If I pass in dirPath of an individual app or lib it does return an array of glob patterns.

so I don't think this code is necessarily compatible with the angular implementation... I think that is maybe the issue, its the angular implementation which works differently to the react implementation. EDIT: no it doesn't work for me with the import in the gist above either....

the only way I can get it working is by doing the following:

...createGlobPatternsForDependenciesLocal(join(__dirname, 'apps/my-app')),

or with a lib name

...createGlobPatternsForDependenciesLocal(join(__dirname, 'libs/shared/ui')),

when I debug, line 15 of generate-globs.js here:

const filenameRelativeToWorkspaceRoot = (0, path_1.relative)(app_root_1.appRootPath, dirPath);

I have the same value for app_root_1.appRootPath as. I do with dirPath

thanks, mate!