Tailwind JIT doesn't work with Next.js

Current Behavior

When Tailwind JIT mode is enabled, applying Tailwind rules within css files only works:

h1 {
  @apply bg-[#fef]
}

However, it is impossible to use Tailwind rules within tsx files at all:

export function Index() {
  return <>
    <h1 className='bg-[#fef]'>Rules hasn't been applied!</h1>
    <h1 className='font-bold'>Rules hasn't been applied!</h1>
  </>;
}

export default Index;

P.S. I generated a Next.js application without NX and it works. Seems like it’s a bug in the executor.

Expected Behavior

Tailwind rules have to be applied with the JIT mode enabled.

Steps to Reproduce

1. npx --ignore-existing create-nx-workspace happynrwl --preset=next
2. cd happynrwl
3. npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
4. cd apps/frontend
5. npx tailwindcss init -p
6. Edit postcss.config.js:

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

1. Edit tailwindcss.config.js:

const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
module.exports = {
  mode: 'jit'
  purge: createGlobPatternsForDependencies(__dirname),
  // ...
};

1. Add the following lines to styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

h1 {
  @apply bg-[#0ff]
}

1. Add some tags to index.tsx:

export function Index() {
  return <>
    <h1>Red title works!</h1>
    <h2 className='bg-green-400'>Green title doesn't work!</h2>
  </>;
}
10. `npm run start`

Environment

 Node : 14.17.3
  OS   : linux x64
  npm  : 6.14.13
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.5.7
  @nrwl/cypress : 12.5.7
  @nrwl/devkit : 12.5.7
  @nrwl/eslint-plugin-nx : 12.5.7
  @nrwl/express : Not Found
  @nrwl/jest : 12.5.7
  @nrwl/linter : 12.5.7
  @nrwl/nest : Not Found
  @nrwl/next : 12.5.7
  @nrwl/node : Not Found
  @nrwl/react : 12.5.7
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.5.7
  @nrwl/web : 12.5.7
  @nrwl/workspace : 12.5.7
  @nrwl/storybook : 12.5.7
  @nrwl/gatsby : Not Found
  typescript : 4.2.4

[juristr]

Thanks folks. Let me have a look at this and see how/whether we can improve the experience here. Won’t be able this week though. Next week’s blog post for the Next + Nx + Tailwind series will be about Storybook and Tailwind. Might be next or the week after. I have to first do some adjustments in the Nx src.

I’ll try to look into this as part of that work. Will ping you for further clarifications 🙂

[juristr]

@marckassay yep, ofc 😅