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

Thx a lot!

The new Angular 13 webpack cache is making tailwind buggy, so it might be an idea to turn it of for now, or at least know about it so you can clear it / disable it.

signs of it not working is.

• it suddenly stops outputting css,
• it works for old classes your already have in your app, but new ones don't work.
• in the console it does two compilations for each change.

read more about the webpack cache here.

https://angular.io/cli/cache

this setting might be located differently in nx.

it might be in nx.json as a property under the cli settings

You should be able to directly import the framework specific convenient functions

const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind')

or

const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind')

Great!
When I first encountered this, there was no implementation in the angular package, but now there is :)

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!