TailwindCSS not working in NX NextJS project.

Current Behavior

Following the egghead tutorial for a NextJS project with a new nx-workspace, installing Tailwind is not working. Tailwind styles are not applied to the page.

Follow steps in this guide: https://egghead.io/lessons/tailwind-setup-next-js-with-tailwind-in-a-nx-workspace or in the steps to reproduce below.

Expected Behavior

Tailwind styles are applied to the page.

Steps to Reproduce

npx create-nx-workspace zip-finder --packageManager=yarn

What to create in the new workspace? next Application name? app Default stylesheet format css Use Nx cloud no

cd zip-finder (workspace name) yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

cd apps/app npx tailwindcss init -p

Replace pages/styles.css with

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

.test { 
  color: red;
}

Replace postcss.config.js with:

const { join } = require('path');

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

Replace pages/index.tsx with something simple like:

export function Index() {
  return (
    <div className="test bg-gray-500">
      <h1>Testing Tailwind!</h1>
    </div>
  );
}

export default Index;

You should see the test class applying the color red to the text, but no Tailwind classes are applied. If you search tailwind in the Dev Tools Elements panel, you’ll see Tailwind is loaded in the DOM.

Adding this to tailwind.config.js doesn’t help either:

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

Best way to repro is from @juristr 's egghead tutorial (which is the same as the steps listed above).

Failure Logs

Environment

Nx Report:

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

Tailwind 3.x.x is used, but I couldn’t find any different install instructions vs. the 2.x.x version used in the egghead tutorial.

Thanks for having a look!

[mathias-lundin]

So, I just got it working. In tailwind.config.js, I had to set content path from root explicitly. Maybe something has changed from Tailwind 2.x.x --> 3.x.x?

// my-monorepo/apps/site/tailwind.config.js

module.exports = {
  // content: [], <-- not working
  // content: ['./pages/**/*.{js,ts,jsx,tsx}'], <-- not working
  content: ['apps/site/pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
};

[sikkeep]

just use this in styles/globals.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';