nx: 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

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

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

Edit tailwindcss.config.js:

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

Add the following lines to styles.css:

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

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

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 19 (7 by maintainers)

Most upvoted comments

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 on Jul 15, 2021

@marckassay yep, ofc 😅

juristr on Aug 29, 2021

@juristr, have a look at the following PR: https://github.com/BorisZubchenko/mono/pull/27

It would be great if you could mention some issues in it 🙂

UPDATE: I’ve deleted the repo above. The similar repo (which I’m not planning to delete 😉): https://github.com/BorisZubchenko/bz/pull/12

Btw, since the plugin for Storybook appeared, it has a related bug: https://github.com/nrwl/nx/issues/6720

BorisZubchenko on Aug 14, 2021

@BorisZubchenko Thanks! In turn, feel free to ask for help with your blog post 😉. I’ve just set up Next+Nx+Tailwind+Storybook, had to spent some time on it though.

Definitely will. I have some changes to push into Nx before writing that blog post which will make the dev ergonomics better for the React Storybook setup in Nx. Wanted to push it for v12.6, but didn’t make it, so it’s gonna go into 12.7. Thus the Storybook blog post will be delayed a bit. I might push another one first meanwhile 😃

@bogdansoare You can prefix it with the TAILWIND_WATCH=true env variable for now as mentioned here and also on the blog post.

I’ll def look into trying to come up with a better DX for this

juristr on Jul 23, 2021

Just want to chime in a little bit about adding the Env Var to the executor, the AngularCLI builder assigns value to TAILWIND_MODE if it detects the project is using Tailwind (based on tailwind.config.js) https://github.com/angular/angular-cli/blob/fe25ab1ef2ce1474db22217a3bdc36db03c18978/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts#L159

But I guess Next executor doesn’t try to detect anything Tailwind specific since the consumers own the postcss config in Next project.

nartc on Jul 13, 2021

I’ve just tested my demo with the purge config you provided. Tailwind rules apply, but only for the first time:

I apply bg-red-400
Serve the application
The element is indeed red
After that, I apply bg-green-400
The element is transparent
After that, I apply bg-red-400
The element is red again

Seems like an AOT, not JIT 😅. Unless I rebuild the app every time I do the change.

BorisZubchenko on Jul 12, 2021

Thanks for mentioning this issue. Can you try to adjust the purge field? Maybe this is a misunderstanding, but the createGlobPatternsForDependencies only creates the glob patterns for dependencies of the app you’re having the tailwind.config.js within.

You should have a purge pattern similar to what I mentioned in my article. Here’s the code:

https://github.com/juristr/blog-series-nextjs-nx/blob/1e2a519cc7cb54c0306e385c2ef48fadd554626d/apps/site/tailwind.config.js#L5-L9

Basically add the glob patterns for the app and then add the createGlobPatternsForDependencies portion for potential dependencies (which I get you don’t have since you don’t have any libs in the demo project).

Can you verify whether JIT doesn’t work with that setup neither?

juristr on Jul 12, 2021