tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Improve error messages when migrating a JS config file goes wrong

Open RobinMalfait opened this issue 3 months ago • 0 comments

This PR updates some error messages with more insights to know what went wrong or why we didn't migrate the JS config file when going from v3 to v4.

Let's say you have a crazy configuration file like this:

module.exports = {
  content: ['app/**/*.{ts,tsx}'],
  presets: [require('./preset.config')], // 1. Presets
  somethingHereThatDoesNotExist: {       // 2. Unknown top-level key, but valid value
    darkMode: ['class'],
  },
  unknown: /as-a-regex/g,                // 3. Unknown top-level key, and invalid value
  theme: {
    notSure: {                           // 4. Unknown theme key
      howToMigrate: 'this theme key',
    },
    aria: {                              // 5. Known theme key, but blocked
      busy: 'busy="true"',
    },
    extend: {
      foo: true,                         // 6. Unknown theme key, invalid value
      booleans: {                        // 7. Unknown theme key
        areCool: true,
      },
      notEven: {                         // 7. Unknown theme key
        regexes: /test/i,
      },
      screens: {
        complex: {
          raw: '(min-width: 500px) and (max-width: 700px)'  // 8. Complex screen config
        }
      },
    },
  }
}

I know it's made up, but just trying to highlight the different kinds of issue we run into and decide not to migrate.

More than happy to adjust the messages. I also included a bunch of different types to check different categories of issues. But migrating a config like this, will result in: image

Still a draft, because the category about data, aria and supports variants and also the category about complex screens is something I just want to solve properly.

RobinMalfait avatar Aug 27 '25 17:08 RobinMalfait