在 nrwl/nx Next js 项目中使用 Tailwind css

Question

如何让 Tailwind css 在 nrwl/nx Next js 项目中工作？ 现在我正在使用通用方法，但它失败了：

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

我采用的常用方法：

1. npx create-nx-workspace@latest my-org

2. yarn add --dev @nrwl/next

3. nx g @nrwl/next:application my-project

4. yarn add tailwindcss autoprefixer postcss-loader @zeit/next-css

5. cd apps/my-project

6. 创建

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

1. 创建

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

8. 创建

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

9. 在页面中创建默认的 _app.js
10. 在 _app.js 中添加 import '../styles/main.css'

Answer 1

我已经解决了这个问题。 这是我在 next.js 项目中添加尾风的方法

1. 在工作区中安装tailwind 和autoprefixer
2. 创建tailwind.config.js 和tailwind.css。
3. 在_app.tsx 处导入tailwind.css
4. 创建next.config.js

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;
  }
};

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

希望对你有帮助。

Answer 2

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

https://nextjs.org/blog/next-9-2

并更新了 Next.js 9.2 的设置示例：

https://github.com/tailwindcss/setup-examples/pull/50

我试过了，效果很好。