Migrate configuration of Heroicons from tailwind.config.js v3.x to v4.x

[saleyn]

I am using the following Tailwindcss config, which define custom icon utility classes (e.g. hero-x-mark) based on the SVG icon files found in the file system.

When migrated to Tailwindcss 4.x this stopped working.

Could anyone suggest a solution?

[wongjn]

That seems like a Tailwind v3 plugin, not a Tailwind CSS configuration file. To include Tailwind v3 plugins in v4, use the @plugin directive.

[saleyn]

@wongjn, thank you! I was able to work this by using the plugin directive like this:

@plugin "./tailwind.heroicons.js"

The only remaining piece of tailwind.config.js that I need to migrate is below, which doesn't seem to be mentioned in the upgrade guide on how to upgrade, and the npx @tailwindcss/upgrade doesn't pick it up:

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      animation: {
        blob: "blob 10s infinite",
      },
      keyframes: {
        blob: {
          "0%": { transform: "translate(Opx, Opx) scale(1)" },
          "100%": { transform: "tranlate(Opx, Opx) scale(1)" }
        }
      }
    }
  },
  variants: {
    scrollbar: ['dark']
  }
};

[wongjn]

If you remove the variants key (which is unused since v2 JIT onwards), the upgrade tool should be able to upgrade the configuration. Otherwise to upgrade this manually:

• darkMode: "class" equivalent
• Animations