Tailwind CSS: Integrated with Next.js

20th August 2020 at 2:19pm
Next.js: Integration Tailwind CSS

Tailwind CSS 是 PostCSS 写的,而 Next.js 又默认内置的 PostCSS,因此你不需要额外安装 PostCSS。

官方文档有一份 指导,如何自定义 PostCSS 的配置。对于整合 Tailwind CSS,重点在于在 PostCSS 的配置中加入 tailwindcss。我整了一份基于 Next.js 9.2 的配置和 Tailwind CSS 1.4.0 的配置:

let plugins = {
  'tailwindcss': {},
  'postcss-flexbugs-fixes': {},
  'postcss-preset-env': {
    autoprefixer: {
      flexbox: 'no-2009',
    },
    stage: 3,
    features: {
      'custom-properties': false,
    },
  },
}

module.exports = {
  plugins: plugins
};

注意,根据 Next.js 的 开发者说明,一旦你写了 postcss.config.js,意味着你不需要 Next.js 来帮你自动管理 PostCSS 的配置。因此你在配置文件中用的插件,全部需要你手动安装而不能依赖 Next.js 本身的依赖:

npm install --save-dev tailwindcss postcss-flexbugs-fixes postcss-preset-env

然后在 styles/tailwind.css 中引入 Tailwind CSS:

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

@tailwind utilities;

添加好后,在你的 pages/_app.jsimport ../styles/tailwind.css 文件即可。

如果同时使用 Bulma 及 Tailwind CSS,则不要引入 Tailwind 中的 base 和 components。在 Web UI Framework: Guidance 了解更多。

StaticKit 写了一篇 文章,关于如何整合 Tailwind CSS 到 Next.js 中。我亦其 备份 到 wiki。