Используйте Tailwind css в проекте nrwl / nx Next js

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')
  ]
};

создать

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

создать

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

создать по умолчанию _app. js на страницах добавить импорт '../styles/main.css' в _app. js

Answer 1

Я решил проблему. Вот как я добавил попутный ветер в следующем. js проекте

1. установите tailwind и autoprefixer в рабочей области
2. create tailwind.config.js и tailwind.css.
3. import tailwind.css at _app.tsx
4. create 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 или в проектах других рамок. Просто найдите путь к правилам pu sh для конфигурации webpack.

Надеюсь, это поможет.

Answer 2

Если вы используете новую версию - 9.2, тогда вам нужна эта статья:

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

И обновленный пример установки для Next. js 9.2:

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

Я попробовал, у меня это хорошо работает.