Breaking change on `1.5.0` with tailwind `3.3.3`

[fmmatheus]

Description

PetalComponents 1.5.0 updates the Update Guide to use Tailwind 3.3.3, but doesn't specify the breaking change in the CHANGELOG file.

Without the breaking change disclaimer or a pinned version protection, folks using tools like dependabot or doing version bump only reading the CHANGELOG will face issue in production.

This just happened at my company:

• dependabot created a PR to version 1.5.0 and 1.5.1
• the engineer that took the PR didn't find any breaking changes in the CHANGELOG
• build to production didn't break, cause tailwind doesn't fail with an exit
• deployed app had no CSS at all due the tailwind silent error

Suggestion

• Include the breaking change in the CHANGELOG
• If possible, pin the tailwind version within petal version

Stacktrace

Log that shows in the mix assets.deploy:

mix tailwind default

Rebuilding...
CssSyntaxError: tailwindcss: /Users/matheusmoreira/hatch/hatch-elixir/deps/petal_components/assets/default.css:163:3: The `bg-gray-950` class does not exist. If `bg-gray-950` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (/snapshot/tailwindcss/node_modules/postcss/lib/input.js:148:16)
    at AtRule.error (/snapshot/tailwindcss/node_modules/postcss/lib/node.js:60:32)
    at processApply (/snapshot/tailwindcss/lib/lib/expandApplyAtRules.js:376:29)
    at /snapshot/tailwindcss/lib/lib/expandApplyAtRules.js:524:9
    at /snapshot/tailwindcss/lib/processTailwindFeatures.js:55:50
    at Object.Once (/snapshot/tailwindcss/lib/cli/build/plugin.js:251:19)
    at LazyResult.runOnRoot (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:393:26)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:42:9) {
  reason: 'The `bg-gray-950` class does not exist. If `bg-gray-950` is a custom class, make sure it is defined within a `@layer` directive.',
  file: '/Users/matheusmoreira/hatch/hatch-elixir/deps/petal_components/assets/default.css',
  source: '/* Container */\n' +
    '\n' +
    '.pc-container {\n' +
    '  @apply w-full mx-auto sm:px-6 lg:px-8;\n' +
    '}\n' +
    '.pc-container--sm {\n' +
    '  @apply max-w-3xl;\n' +
    '}\n' +
    '.pc-container--md {\n' +
    '  @apply max-w-5xl;\n' +
    '}\n' +
    '.pc-container--lg {\n' +
    '  @apply max-w-7xl;\n' +
    '}\n' +
    '.pc-container--xl {\n' +
    '  @apply max-w-[85rem];\n' +
    '}\n' +
    '.pc-container--full {\n' +
    '  @apply max-w-full;\n' +
    '}\n' +
    '.pc-container--mobile-padded {\n' +
    '  @apply px-4;\n' +
    '}\n' +
    '\n' +
    '/* Buttons */\n' +
    '\n' +
    '.pc-button {\n' +
    '  @apply inline-flex items-center justify-center font-medium transition duration-150 ease-in-out border rounded-md focus:outline-none;\n' +
    '}\n' +
    '\n' +
    '/* Buttons - sizes */\n' +
    '\n' +
    '.pc-button--xs {\n' +
    '  @apply text-xs leading-4 px-2.5 py-1.5;\n' +
    '}\n' +
    '.pc-button--sm {\n' +
    '  @apply px-3 py-2 text-sm leading-4;\n' +
    '}\n' +
    '.pc-button--md {\n' +
    '  @apply px-4 py-2 text-sm leading-5;\n' +
    '}\n' +
    '.pc-button--lg {\n' +
    '  @apply px-4 py-2 text-base leading-6;\n' +
    '}\n' +
    '.pc-button--xl {\n' +
    '  @apply px-6 py-3 text-base leading-6;\n' +
    '}\n' +
    '\n' +
    '/* Buttons - colors */\n' +
    '\n' +
    '.pc-button--primary {\n' +
    '  @apply text-white border-transparent bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;\n' +
    '}\n' +
    '.pc-button--primary-outline {\n' +
    '  @apply border-primary-400 dark:border-primary-400 dark:active:border-primary-400 dark:hover:border-primary-300 dark:hover:text-primary-300 dark:hover:bg-transparent dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-primary-700 active:bg-primary-200 hover:bg-primary-50 focus:border-primary-700 focus:shadow-primary-500/50;\n' +
    '}\n' +
    '.pc-button--primary-inverted {\n' +
    '  @apply border-primary-400 dark:border-primary-400 dark:hover:border-primary-700 dark:hover:text-white dark:hover:bg-primary-700 dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-white active:bg-primary-700 hover:bg-primary-600 focus:border-primary-700 focus:shadow-primary-500/50;\n' +
    '}\n' +
    '.pc-button--primary-shadow {\n' +
    '  @apply text-white border-transparent shadow-xl bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50 shadow-primary-500/30 dark:hover:shadow-primary-600/30 dark:focus:shadow-primary-600/30 dark:active:shadow-primary-700/30;\n' +
    '}\n' +
    '.pc-button--secondary {\n' +
    '  @apply text-white border-transparent bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50;\n' +
    '}\n' +
    '.pc-button--secondary-outline {\n' +
    '  @apply border-secondary-400 dark:border-secondary-400 dark:active:border-secondary-400 dark:hover:border-secondary-300 dark:hover:text-secondary-300 dark:hover:bg-transparent dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-secondary-700 active:bg-secondary-200 hover:bg-secondary-50 focus:border-secondary-700 focus:shadow-secondary-500/50;\n' +
    '}\n' +
    '.pc-button--secondary-inverted {\n' +
    '  @apply border-secondary-400 dark:border-secondary-400 dark:hover:border-secondary-700 dark:hover:text-white dark:hover:bg-secondary-700 dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-white active:bg-secondary-700 hover:bg-secondary-600 focus:border-secondary-700 focus:shadow-secondary-500/50;\n' +
    '}\n' +
    '.pc-button--secondary-shadow {\n' +
    '  @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:focus:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;\n' +
    '}\n' +
    '.pc-button--white {\n' +
    '  @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;\n' +
    '}\n' +
    '.pc-button--white-outline {\n' +
    '  @apply text-gray-600 border-gray-400 dark:border-gray-300 dark:active:border-gray-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-gray-200 dark:hover:text-gray-200 dark:hover:bg-transparent dark:text-gray-300 hover:border-gray-600 hover:text-gray-700 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600;\n' +
    '}\n' +
    '.pc-button--white-inverted {\n' +
    '  @apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white focus:border-gray-700 focus:shadow-gray-500/50;\n' +
    '}\n' +
    '.pc-button--white-shadow {\n' +
    '  @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30;\n' +
    '}\n' +
    '.pc-button--pure-white {\n' +
    '  @apply text-gray-700 bg-white border-transparent border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 focus:outline-none focus:border-transparent focus:bg-gray-100 focus:text-gray-900 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;\n' +
    '}\n' +
    '.pc-button--info {\n' +
    '  @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700;\n' +
    '}\n' +
    '.pc-button--info-outline {\n' +
    '  @apply text-info-600 border-info-400 dark:border-info-400 dark:active:border-info-400 dark:hover:border-info-300 dark:hover:text-info-300 dark:hover:bg-transparent dark:text-info-400 hover:border-info-600 hover:text-info-700 active:border-info-600 focus:text-info-600 active:text-info-700 active:bg-info-100 hover:bg-info-50 focus:border-info-700;\n' +
    '}\n' +
    '.pc-button--info-inverted {\n' +
    '  @apply text-info-600 border-info-400 dark:border-info-400 dark:hover:border-info-700 dark:hover:text-white dark:hover:bg-info-700 dark:text-info-400 hover:border-info-600 hover:text-white active:bg-info-800 hover:bg-info-600 focus:border-info-700 focus:shadow-info-500/50;\n' +
    '}\n' +
    '.pc-button--info-shadow {\n' +
    '  @apply text-white border-transparent shadow-xl bg-info-600 hover:bg-info-700 focus:bg-info-700 active:bg-info-800 focus:shadow-info-500/50 shadow-info-500/30 dark:hover:shadow-info-600/30 dark:focus:shadow-info-600/30 dark:active:shadow-info-700/30;\n' +
    '}\n' +
    '.pc-button--success {\n' +
    '  @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700;\n' +
    '}\n' +
    '.pc-button--success-outline {\n' +
    '  @apply text-success-600 border-success-400 dark:border-success-400 dark:active:border-success-500 dark:hover:border-success-300 dark:hover:text-success-300 dark:hover:bg-transparent dark:text-success-400 hover:border-success-600 hover:text-success-700 active:border-success-600 focus:text-success-600 active:text-success-700 active:bg-success-100 hover:bg-success-50 focus:border-success-700;\n' +
    '}\n' +
    '.pc-button--success-inverted {\n' +
    '  @apply text-success-600 border-success-400 dark:border-success-400 dark:hover:border-success-700 dark:hover:text-white dark:hover:bg-success-700 dark:text-success-400 hover:border-success-600 hover:text-white active:bg-success-800 hover:bg-success-600 focus:border-success-700 focus:shadow-success-500/50;\n' +
    '}\n' +
    '.pc-button--success-shadow {\n' +
    '  @apply text-white border-transparent shadow-xl bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700 focus:shadow-success-500/50 shadow-success-500/30 dark:hover:shadow-success-600/30 dark:focus:shadow-success-600/30 dark:active:shadow-success-700/30;\n' +
    '}\n' +
    '.pc-button--warning {\n' +
    '  @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 focus:bg-warning-700;\n' +
    '}\n' +
    '.pc-button--warning-outline {\n' +
    '  @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:active:border-warning-500 dark:hover:border-warning-300 dark:hover:text-warning-300 dark:hover:bg-transparent dark:text-warning-400 hover:border-warning-600 hover:text-warning-700 active:border-warning-600 focus:text-warning-600 active:text-warning-700 active:bg-warning-100 hover:bg-warning-50 focus:border-warning-700;\n' +
    '}\n' +
    '.pc-button--warning-inverted {\n' +
    '  @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:hover:border-warning-700 dark:hover:text-white dark:hover:bg-warning-700 dark:text-warning-400 hover:border-warning-600 hover:text-white active:bg-warning-800 hover:bg-warning-600 focus:border-warning-700 focus:shadow-warning-500/50;\n' +
    '}\n' +
    '.pc-button--warning-shadow {\n' +
    '  @apply text-white border-transparent shadow-xl bg-warning-600 hover:bg-warning-700 focus:bg-warning-700 active:bg-warning-800 focus:shadow-warning-500/50 shadow-warning-500/30 dark:hover:shadow-warning-600/30 dark:focus:shadow-warning-600/30 dark:active:shadow-warning-700/30;\n' +
    '}\n' +
    '.pc-button--danger {\n' +
    '  @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 focus:bg-danger-700;\n' +
    '}\n' +
    '.pc-button--danger-outline {\n' +
    '  @apply text-danger-600 border-danger-400 dark:active:border-danger-400 dark:border-danger-400 dark:hover:border-danger-300 dark:hover:text-danger-300 dark:hover:bg-transparent dark:text-danger-400 hover:border-danger-600 hover:text-danger-700 active:bg-danger-200 active:border-danger-700 hover:bg-danger-50 focus:border-danger-700;\n' +
    '}\n' +
    '.pc-button--danger-inverted {\n' +
    '  @apply text-danger-600 border-danger-400 dark:border-danger-400 dark:hover:border-danger-700 dark:hover:text-white dark:hover:bg-danger-700 dark:text-danger-400 hover:border-danger-600 hover:text-white active:bg-danger-800 hover:bg-danger-600 focus:border-danger-700 focus:shadow-danger-500/50;\n' +
    '}\n' +
    '.pc-button--danger-shadow {\n' +
    '  @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 focus:bg-danger-700 active:bg-danger-800 focus:shadow-danger-500/50 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:focus:shadow-danger-600/30 dark:active:shadow-danger-700/30;\n' +
    '}\n' +
    '.pc-b'... 32734 more characters,
  line: 163,
  column: 3,
  endLine: 163,
  endColumn: 289,
  input: {
    line: 163,
    column: 3,
    endLine: 163,
    endColumn: 289,
    source: '/* Container */\n' +
      '\n' +
      '.pc-container {\n' +
      '  @apply w-full mx-auto sm:px-6 lg:px-8;\n' +
      '}\n' +
      '.pc-container--sm {\n' +
      '  @apply max-w-3xl;\n' +
      '}\n' +
      '.pc-container--md {\n' +
      '  @apply max-w-5xl;\n' +
      '}\n' +
      '.pc-container--lg {\n' +
      '  @apply max-w-7xl;\n' +
      '}\n' +
      '.pc-container--xl {\n' +
      '  @apply max-w-[85rem];\n' +
      '}\n' +
      '.pc-container--full {\n' +
      '  @apply max-w-full;\n' +
      '}\n' +
      '.pc-container--mobile-padded {\n' +
      '  @apply px-4;\n' +
      '}\n' +
      '\n' +
      '/* Buttons */\n' +
      '\n' +
      '.pc-button {\n' +
      '  @apply inline-flex items-center justify-center font-medium transition duration-150 ease-in-out border rounded-md focus:outline-none;\n' +
      '}\n' +
      '\n' +
      '/* Buttons - sizes */\n' +
      '\n' +
      '.pc-button--xs {\n' +
      '  @apply text-xs leading-4 px-2.5 py-1.5;\n' +
      '}\n' +
      '.pc-button--sm {\n' +
      '  @apply px-3 py-2 text-sm leading-4;\n' +
      '}\n' +
      '.pc-button--md {\n' +
      '  @apply px-4 py-2 text-sm leading-5;\n' +
      '}\n' +
      '.pc-button--lg {\n' +
      '  @apply px-4 py-2 text-base leading-6;\n' +
      '}\n' +
      '.pc-button--xl {\n' +
      '  @apply px-6 py-3 text-base leading-6;\n' +
      '}\n' +
      '\n' +
      '/* Buttons - colors */\n' +
      '\n' +
      '.pc-button--primary {\n' +
      '  @apply text-white border-transparent bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;\n' +
      '}\n' +
      '.pc-button--primary-outline {\n' +
      '  @apply border-primary-400 dark:border-primary-400 dark:active:border-primary-400 dark:hover:border-primary-300 dark:hover:text-primary-300 dark:hover:bg-transparent dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-primary-700 active:bg-primary-200 hover:bg-primary-50 focus:border-primary-700 focus:shadow-primary-500/50;\n' +
      '}\n' +
      '.pc-button--primary-inverted {\n' +
      '  @apply border-primary-400 dark:border-primary-400 dark:hover:border-primary-700 dark:hover:text-white dark:hover:bg-primary-700 dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-white active:bg-primary-700 hover:bg-primary-600 focus:border-primary-700 focus:shadow-primary-500/50;\n' +
      '}\n' +
      '.pc-button--primary-shadow {\n' +
      '  @apply text-white border-transparent shadow-xl bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50 shadow-primary-500/30 dark:hover:shadow-primary-600/30 dark:focus:shadow-primary-600/30 dark:active:shadow-primary-700/30;\n' +
      '}\n' +
      '.pc-button--secondary {\n' +
      '  @apply text-white border-transparent bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50;\n' +
      '}\n' +
      '.pc-button--secondary-outline {\n' +
      '  @apply border-secondary-400 dark:border-secondary-400 dark:active:border-secondary-400 dark:hover:border-secondary-300 dark:hover:text-secondary-300 dark:hover:bg-transparent dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-secondary-700 active:bg-secondary-200 hover:bg-secondary-50 focus:border-secondary-700 focus:shadow-secondary-500/50;\n' +
      '}\n' +
      '.pc-button--secondary-inverted {\n' +
      '  @apply border-secondary-400 dark:border-secondary-400 dark:hover:border-secondary-700 dark:hover:text-white dark:hover:bg-secondary-700 dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-white active:bg-secondary-700 hover:bg-secondary-600 focus:border-secondary-700 focus:shadow-secondary-500/50;\n' +
      '}\n' +
      '.pc-button--secondary-shadow {\n' +
      '  @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:focus:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;\n' +
      '}\n' +
      '.pc-button--white {\n' +
      '  @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;\n' +
      '}\n' +
      '.pc-button--white-outline {\n' +
      '  @apply text-gray-600 border-gray-400 dark:border-gray-300 dark:active:border-gray-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-gray-200 dark:hover:text-gray-200 dark:hover:bg-transparent dark:text-gray-300 hover:border-gray-600 hover:text-gray-700 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600;\n' +
      '}\n' +
      '.pc-button--white-inverted {\n' +
      '  @apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white focus:border-gray-700 focus:shadow-gray-500/50;\n' +
      '}\n' +
      '.pc-button--white-shadow {\n' +
      '  @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30;\n' +
      '}\n' +
      '.pc-button--pure-white {\n' +
      '  @apply text-gray-700 bg-white border-transparent border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 focus:outline-none focus:border-transparent focus:bg-gray-100 focus:text-gray-900 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;\n' +
      '}\n' +
      '.pc-button--info {\n' +
      '  @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700;\n' +
      '}\n' +
      '.pc-button--info-outline {\n' +
      '  @apply text-info-600 border-info-400 dark:border-info-400 dark:active:border-info-400 dark:hover:border-info-300 dark:hover:text-info-300 dark:hover:bg-transparent dark:text-info-400 hover:border-info-600 hover:text-info-700 active:border-info-600 focus:text-info-600 active:text-info-700 active:bg-info-100 hover:bg-info-50 focus:border-info-700;\n' +
      '}\n' +
      '.pc-button--info-inverted {\n' +
      '  @apply text-info-600 border-info-400 dark:border-info-400 dark:hover:border-info-700 dark:hover:text-white dark:hover:bg-info-700 dark:text-info-400 hover:border-info-600 hover:text-white active:bg-info-800 hover:bg-info-600 focus:border-info-700 focus:shadow-info-500/50;\n' +
      '}\n' +
      '.pc-button--info-shadow {\n' +
      '  @apply text-white border-transparent shadow-xl bg-info-600 hover:bg-info-700 focus:bg-info-700 active:bg-info-800 focus:shadow-info-500/50 shadow-info-500/30 dark:hover:shadow-info-600/30 dark:focus:shadow-info-600/30 dark:active:shadow-info-700/30;\n' +
      '}\n' +
      '.pc-button--success {\n' +
      '  @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700;\n' +
      '}\n' +
      '.pc-button--success-outline {\n' +
      '  @apply text-success-600 border-success-400 dark:border-success-400 dark:active:border-success-500 dark:hover:border-success-300 dark:hover:text-success-300 dark:hover:bg-transparent dark:text-success-400 hover:border-success-600 hover:text-success-700 active:border-success-600 focus:text-success-600 active:text-success-700 active:bg-success-100 hover:bg-success-50 focus:border-success-700;\n' +
      '}\n' +
      '.pc-button--success-inverted {\n' +
      '  @apply text-success-600 border-success-400 dark:border-success-400 dark:hover:border-success-700 dark:hover:text-white dark:hover:bg-success-700 dark:text-success-400 hover:border-success-600 hover:text-white active:bg-success-800 hover:bg-success-600 focus:border-success-700 focus:shadow-success-500/50;\n' +
      '}\n' +
      '.pc-button--success-shadow {\n' +
      '  @apply text-white border-transparent shadow-xl bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700 focus:shadow-success-500/50 shadow-success-500/30 dark:hover:shadow-success-600/30 dark:focus:shadow-success-600/30 dark:active:shadow-success-700/30;\n' +
      '}\n' +
      '.pc-button--warning {\n' +
      '  @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 focus:bg-warning-700;\n' +
      '}\n' +
      '.pc-button--warning-outline {\n' +
      '  @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:active:border-warning-500 dark:hover:border-warning-300 dark:hover:text-warning-300 dark:hover:bg-transparent dark:text-warning-400 hover:border-warning-600 hover:text-warning-700 active:border-warning-600 focus:text-warning-600 active:text-warning-700 active:bg-warning-100 hover:bg-warning-50 focus:border-warning-700;\n' +
      '}\n' +
      '.pc-button--warning-inverted {\n' +
      '  @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:hover:border-warning-700 dark:hover:text-white dark:hover:bg-warning-700 dark:text-warning-400 hover:border-warning-600 hover:text-white active:bg-warning-800 hover:bg-warning-600 focus:border-warning-700 focus:shadow-warning-500/50;\n' +
      '}\n' +
      '.pc-button--warning-shadow {\n' +
      '  @apply text-white border-transparent shadow-xl bg-warning-600 hover:bg-warning-700 focus:bg-warning-700 active:bg-warning-800 focus:shadow-warning-500/50 shadow-warning-500/30 dark:hover:shadow-warning-600/30 dark:focus:shadow-warning-600/30 dark:active:shadow-warning-700/30;\n' +
      '}\n' +
      '.pc-button--danger {\n' +
      '  @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 focus:bg-danger-700;\n' +
      '}\n' +
      '.pc-button--danger-outline {\n' +
      '  @apply text-danger-600 border-danger-400 dark:active:border-danger-400 dark:border-danger-400 dark:hover:border-danger-300 dark:hover:text-danger-300 dark:hover:bg-transparent dark:text-danger-400 hover:border-danger-600 hover:text-danger-700 active:bg-danger-200 active:border-danger-700 hover:bg-danger-50 focus:border-danger-700;\n' +
      '}\n' +
      '.pc-button--danger-inverted {\n' +
      '  @apply text-danger-600 border-danger-400 dark:border-danger-400 dark:hover:border-danger-700 dark:hover:text-white dark:hover:bg-danger-700 dark:text-danger-400 hover:border-danger-600 hover:text-white active:bg-danger-800 hover:bg-danger-600 focus:border-danger-700 focus:shadow-danger-500/50;\n' +
      '}\n' +
      '.pc-button--danger-shadow {\n' +
      '  @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 focus:bg-danger-700 active:bg-danger-800 focus:shadow-danger-500/50 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:focus:shadow-danger-600/30 dark:active:shadow-danger-700/30;\n' +
      '}\n' +
      '.pc-b'... 32734 more characters,
    url: 'file:///Users/matheusmoreira/hatch/hatch-elixir/deps/petal_components/assets/default.css',
    file: '/Users/matheusmoreira/hatch/hatch-elixir/deps/petal_components/assets/default.css'
  },
  plugin: 'tailwindcss'
}

[mplatts]

Apologies about that. We will make sure to include breaking changes in the changelog in future. Not sure we can pin a Tailwind version

[mplatts]

Updated the changelog and upgrade guide