我有一个场景，想把基于 SASS 的 Bulma 作为组件库，再引入基于 PostCSS 的 Tailwind CSS 作为 utilities。

整个过程折腾了很久，各种报错，最后才尝试成功。

首先按 Tailwind CSS: Integrated with Next.js 写好 postcss.config.js 以及 styles/tailwind.css。然后需要安装这两个插件：

npm install --save-dev @zeit/next-css @zeit/next-sass

这里是奇怪点。如果你不用 SASS（不安装 @zeit/next-sass），那么你也不需要 @zeit/next-css 就可以正常用 Tailwind CSS。但是一旦你要用 SASS，你就必须这两个插件都安装。然后配置 next.config.js，将这两个插件的参数注入进来：

const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withSass({}))

最终的效果是：

1. pages/_app.js:

   // Note: 这里启用了 babel-plugin-module-resolver，因此不需要用相对路径
   import 'styles/style.sass'
   import 'styles/tailwind.css'
   
   // This default export is required in a new `pages/_app.js` file.
   export default function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />
   }

2. styles/style.sass:

   @charset "utf-8"
   @import "~bulma"

3. styles/tailwind.css:

   /* purgecss start ignore */
   @tailwind base;
   @tailwind components;
   /* purgecss end ignore */
   
   @tailwind utilities;

然后你可以在 JSX 正常使用 Bulma 及 Tailwind CSS 的 class。

Note

这个过程是在 Next.js 9.2.2 上完成的。不知道后续会不会产生变化。