nx - tailwindcss 不适用于下一个 js答案

【问题标题】：nx - tailwindcss not working with next jsnx - tailwindcss 不适用于下一个 js
【发布时间】：2022-01-16 04:02:00
【问题描述】：

我使用 nextjs 预设使用 nx 生成一个新项目。然后在 nx dev 博客文章的帮助下，我设置了 tailwind css，如下所示

postcss.config.js

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

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

    // tailwindcss: {
    //   config: join(__dirname, 'tailwind.config.js'),
    // },
    autoprefixer: {},
  },
}

tailwind.config.js

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

module.exports = {
  purge: createGlobPatternsForDependencies(__dirname),
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },

};

module.exports = withNx(nextConfig);

但现在，如果我运行应用程序，应用程序中似乎没有加载顺风 CSS。那么我做错了什么，如何解决这个问题？

【问题讨论】：

标签： tailwind-css nrwl-nx

【解决方案1】：

YR007 答案应该被标记为正确答案，如果 postcss.config.js 和 tailwind.config.js 在 monorepo 应用程序中，它们都应该有根引用，例如：

postcss.config.js

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

tailwind.config.js

module.exports = {
  content: [
    './apps/backoffice/index.html',
    './apps/backoffice/src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

【讨论】：

【解决方案2】：

在tailwind.config.js中，您应该将“purge”更改为tailwindcss新版本推荐的“content”，并且路径应该从根路径开始配置。例如：内容：['./apps/blogs/pages/**/*.{js,ts,jsx,tsx}']

【讨论】：

【解决方案3】：

有一种简单的设置方法。在根目录下创建一个tailwind.config.js 文件并添加此代码

module.exports = {
  mode: "jit",
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

创建一个 postcss.config.js 文件并制作它

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

然后在你的 globals.css 中，简单地导入 tailwind

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

并在你的 app.js 中包含这个 globals.css 文件

【讨论】：

您好，这是一个 nx monorepo 项目，您所说的 root 是指项目 root 还是应用程序 root？
如果它的 monorepo 则 tailwind css 将位于根目录，因此将 postcss.config.js 和 tailwind.config.js 项目设为您已安装 tailwind 的根目录，然后在您的个人应用程序的 globals.css 中添加
文档确实需要更新：nx.dev/guides/using-tailwind-css-in-react