Next.js 在nrwl/nx下一个js项目中使用Tailwind css

如何使Tailwind css在nrwl/nx下一个js项目中工作？ 现在我使用的是通用方法，但失败了：

[ error ] ./styles/main.css
Error: Didn't get a result from child compiler

我采取的共同方法是：

npx创建nx-workspace@latest我的组织

纱线添加--dev@nrwl/next

nx g@nrwl/next:application my project

纱线添加tailwindcss autoprefixer postss loader@zeit/next css

cd应用程序/我的项目

创造

创造

创造

在页面中创建默认的app.js

在app.js中添加导入“../styles/main.css”

---

如果您使用的是新版本-9.2，那么您需要这篇文章：

并更新了Next.js 9.2的安装示例：

我试过了，它对我很有效。

我已经解决了这个问题。 下面是我如何在next.js项目中添加tailwind的

在工作区中安装

tailwind

和

autoprefixer

创建

tailwind.config.js

和

tailwind.css

在

\u app.tsx导入
tailwind.css

创建

next.config.js

如果您想将Tailwind与lib的故事书或其他框架的项目集成，则类似。只需找到将规则推送到webpack配置的方法

---

希望有帮助。

谢谢。但这里的上下文位于nrwl/nx工作区内。你试过了吗？嘿@Yan谢谢你发布这些步骤。我正试图按照这些步骤操作并获取此编译错误```错误-./pages/index.module.css 11:5模块解析失败：使用这些加载程序处理了意外的令牌（11:5）文件：.././node_modules/postss loader/dist/cjs您可能需要额外的加载程序来处理这些加载程序的结果。|/|>html{|行高：1.15；/1/|-webkit文本大小调整：100%；/2*/``有什么建议吗？谢谢@jerry，问题似乎出在css模块上。我没有使用它，顺便说一句，我现在没有使用nx进行monorepo管理，所以不太确定如何正确配置它。你可以检查nx的git问题。我记得在那里有一些关于这方面的讨论从那时起，他们可能已经支持css模块了。

postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
};

next.config.js
const withCSS = require('@zeit/next-css');
module.exports = withCSS({});

styles/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

const path = require('path');

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('tailwindcss')(
                path.resolve(__dirname, 'tailwind.config.js') // the absolute path of your tailwind.config.js
              ),
              require('autoprefixer')
            ]
          }
        }
      ],
      // the absolute path of the folder contains tailwind.css
      // I reuse tailwind.css across projects and libs so I put it in the workspace root
      // Maybe I should create a lib for it.
      include: path.resolve('./global') 
    });

    return config;
  }
};