next-plugin-twin

Next.js plugin twin

This plugin enables automatic reloads with twin.macro + Next.js when changing your tailwind.config.js.

Installation

Install with npm:

npm install next-plugin-twin

or with yarn:

yarn add next-plugin-twin

Then in next.config.js in your project root add the plugin by wrapping the existing config:

// next.config.js
const withTwinReload = require("next-plugin-twin");

module.exports = withTwinReload({
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Fix packages that depend on fs/module module
      config.node = { fs: "empty", module: "empty" };
    }

    return config;
  },
});

The fs/module replacements above are not required but recommended when using twin with Next.js.

Special thanks

A big shoutout to Hippo from the twin discord for discovering the technique for auto-reloads within babel-plugins.

More

• Twin + Next.js + Styled-components example
• Twin + Next.js + Emotion example