next.js - 在 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 添加 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({});

1. 创建

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

1. 在页面中创建一个默认的 _app.js
2. 在 _app.js 中添加 import '../styles/main.css'

Answer 1

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

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 配置的方法即可。

希望对您有所帮助。