React: Tailwind CSS 3 doesn't work

Current Behavior

If you try to add TailwindCSS to a React project, the tailwind styles are never generated when serving or buildings.

Expected Behavior

• Tailwind styles are applied

Steps to Reproduce

• Create a new workspace
• Add the react plugin
• Create a new react application
• Follow the instructions at: https://nx.dev/l/r/guides/using-tailwind-css-in-react
  • Note, using the new content key instead of purge
• Serve the app

Failure Logs

• No failure logs

Environment

  Node : 14.18.1
  OS   : darwin x64
  yarn : 1.22.17
  
  nx : 13.3.6
  @nrwl/angular : undefined
  @nrwl/cli : 13.3.6
  @nrwl/cypress : 13.3.9
  @nrwl/devkit : 13.3.9
  @nrwl/eslint-plugin-nx : 13.3.9
  @nrwl/express : undefined
  @nrwl/jest : 13.3.9
  @nrwl/linter : 13.3.9
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : 13.3.9
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.6
  @nrwl/web : 13.3.9
  @nrwl/workspace : 13.3.6
  @nrwl/storybook : 13.3.9
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.7
  ---------------------------------------
  Community plugins:

[puku0x]

It works for me. I guess you forgot adding a glob pattern for your app.

// apps/<app-name>/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {
      config: 'apps/<app-name>/tailwind.config.js',
    },
    autoprefixer: {},
  },
};

// apps/<app-name>/tailwind.config.js
const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');

module.exports = {
  content: [
    'apps/<app-name>/src/**/*.{js,jsx,ts,tsx}',
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

// apps/<app-name>/src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

[rogerfar]

Could the docs be updated to reflect tailwind 3? Right now it’s installing the latest version but the instructions, and generated config files, are wrong.

This is the config that works for me:

module.exports = {
  plugins: {
    tailwindcss: { config: 'tailwind.config.js' },
    autoprefixer: {},
  },
};

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

module.exports = {
  content: [
    '../../apps/**/*.{js,jsx,ts,tsx}',
    '../../libs/**/*.{js,jsx,ts,tsx}',
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},  
  },
  variants: {
    extend: {},
  },
  plugins: [],
};