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

Question

如何让 Tailwind css 在 nrwl/nx 下一个 js 项目中工作？现在我正在使用常见的方法但它失败了：

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

我常用的方法：

npx create-nx-workspace@latest my-org
yarn add --dev @nrwl/next
nx g @nrwl/next:application my-project
yarn add tailwindcss autoprefixer postcss-loader @zeit/next-css
cd apps/my-project
创建

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;

在页面
在 _app.js

Answer 1

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

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

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

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

我试过了，对我来说效果很好。

Answer 2

我已经解决了问题。这是我在 next.js 项目

中添加 tailwind 的方法

在工作区中安装 tailwind 和 autoprefixer
创建 tailwind.config.js 和 tailwind.css。
在 _app.tsx

tailwind.css

创建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 的storybook 或其他框架的项目集成，类似。只是找到将规则推送到 webpack 配置的方法。

希望对您有所帮助。

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

Use Tailwind css in a nrwl/nx Next js project

next.js

tailwind-css

nrwl-nx