Cannot Find Module tailwindcss-hero-patterns

[Isaac-Tait]

I am getting this error when running the npx upgrade to v4:

Could not load the configuration file: Cannot find module 'tailwindcss-hero-patterns/src/patterns' 
│   Require stack: 
│   - /Users/.../.../.../tailwind.config.js 

I read another post where someone was having a module error like this but not related to tailwind-hero-patterns and tried npm link tailwindcss but that did not work... Also, I keep getting the error message that v4.0.7 is installed by my package.json says v3. When I rm -rf node_modules the error goes away though... 🤷🏻‍♂️

[Isaac-Tait]

FYI:

tailwind.config.js

const heroPatterns = require('tailwindcss-hero-patterns/src/patterns');

module.exports ={
heroPatterns: {
      topography: heroPatterns.topography,
      rain: heroPatterns.rain,
      bamboo: heroPatterns.bamboo,
    },
    heroPatternsShades: [
      '100',
      '200',
      '300',
      '400',
      '500',
      '600',
      '700',
      '800',
      '900',
    ],
    heroPatternsColors: [
      'green',
      'yellow',
      'gray',
      'indigo',
      'purple',
    ],
  },
  plugins: [
    require('tailwindcss-hero-patterns'),
    require('@tailwindcss/typography'),

[wongjn]

It seems like you have some syntax errors in your tailwind.config.js, There seems to be some curly brace mismatch. This can be seen more clearly when formatted:

module.exports = {
  heroPatterns: {
    topography: heroPatterns.topography,
    rain: heroPatterns.rain,
    bamboo: heroPatterns.bamboo,
  },
  heroPatternsShades: [
    '100',
    '200',
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '900',
  ],
  heroPatternsColors: [
    'green',
    'yellow',
    'gray',
    'indigo',
    'purple',
  ],
}, // Should be semi-colon `;`, not comma `,`.

// This bit is invalid JavaScript syntax.
plugins: [
  require('tailwindcss-hero-patterns'),
  require('@tailwindcss/typography'),
// Also missing closing `]`

Otherwise, guessing at fixing the syntax, I don't get any such error as you have described. It would be helpful if you could provide a git repo reproduction of the error such that we may be able to better assist.

[Isaac-Tait]

Sorry, I just c&p the relevant parts of the tailwind.config.js file. Here is the whole thing:

/** @type {import('tailwindcss').Config} */
const heroPatterns = require('tailwindcss-hero-patterns/src/patterns');
const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    './src/pages/**/*.{js,mdx}',
    './src/components/**/*.{js,mdx}',
    './src/app/**/*.{js,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial':
          'radial-gradient(var(--tw-gradient-stops))',
      },
    },
    fontFamily: {
      sans: ['ui-sans-serif', 'system-ui'],
      serif: ['ui-serif', 'Georgia'],
      mono: ['ui-monospace', 'SFMono-Regular'],
      cursive: ['"Permanent Marker"', 'cursive'],
      chalk: ['"Gloria Hallelujah"', 'cursive'],
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      indigo: colors.indigo,
      gray: colors.zinc,
      purple: colors.violet,
      red: colors.rose,
      blue: colors.blue,
      pink: colors.pink,
      emerald: colors.emerald,
      amber: colors.amber,
      green: {
        200: '#355e3b',
      },
      yellow: {
        100: '#fef9c3',
        200: '#Eedd82', //camp specific
        300: '#fde047',
        400: '#B8860b', //camp specific
        500: '#8B4513', //custom
        600: '#A77197', //custom
        700: '#5F1E6F', //custom
        800: '#92400e',
        900: '#78350f',
      },
    },
    heroPatterns: {
      topography: heroPatterns.topography,
      rain: heroPatterns.rain,
      bamboo: heroPatterns.bamboo,
    },
    heroPatternsShades: [
      '100',
      '200',
      '300',
      '400',
      '500',
      '600',
      '700',
      '800',
      '900',
    ],
    heroPatternsColors: [
      'green',
      'yellow',
      'gray',
      'indigo',
      'purple',
    ],
  },
  plugins: [
    require('tailwindcss-hero-patterns'),
    require('@tailwindcss/typography'),
  ],
};

as for the the git repo error I am only getting this:

≈ tailwindcss v4.0.7

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./tailwind.config.js` to `./src/styles/globals.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Could not load the configuration file: Cannot find module 'tailwindcss-hero-patterns/src/patterns' 
│   Require stack: 
│   - /Users/.../.../.../tailwind.config.js

after I run npx @tailwindcss/upgrade in my terminal. I can share a codespace with you if you want... (interestingly enough when I run the npx command in codespaces I get this error:

≈ tailwindcss v4.0.7

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./tailwind.config.js` to `./src/styles/globals.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Could not load the configuration file: `addUtilities({ '.heropattern-topography-transparent\/10' : … })` defines an invalid utility 
│   selector. Utilities must be a single class name and start with a lowercase letter, eg. `.scrollbar-none`. 

[wongjn]

The error you encounter in the codespace should be the expected error. It would seem like the tailwindcss-hero-patterns plugin is not compatible with v4.

Seems like something locally on your machine perhaps that's causing the original error.

[QaahirStewart]

did we get this to work for v4?

[rozsazoltan]

Yeah, #16701 (comment)

[rozsazoltan]

v0.0.2 behaved misleadingly everywhere because it was still very simple. From v0.1 onward, everything completely broke due to very specific implementation. I rewrote it.

Changes:

• CJS -> ESM
• heropattern -> pattern (I understand why it was heropattern, but extending the namespace this way is unnecessary, especially since the pattern list can be expanded with any SVG)
• Tailwind CSS v4 compatible
• Handles colors as values
• opacity removed; now works as a modifier similar to text-color or bg-color

Usage example:

• https://github.com/rozsazoltan/tailwindcss-patterns

TailwindCSS v4 compatibility

npm uninstall tailwindcss-hero-patterns
npm install @rozsazoltan/tailwindcss-patterns

CSS entrypoint

@import "tailwindcss";
  
@plugin "@rozsazoltan/tailwindcss-patterns";

• TailwindCSS v4 Playground

TailwindCSS v3 compatibility

npm uninstall tailwindcss-hero-patterns
npm install @rozsazoltan/tailwindcss-patterns

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [require('@rozsazoltan/tailwindcss-patterns@1.0.1')],
}

• TailwindCSS v3 Playground

Source: svengau/tailwindcss-hero-patterns#10 (comment)