Tailwind custom plugin doesn't work (addUtilities, addComponents, etc)

Here is the simplest plugin i Tried to write, but it doesn't work.

tailwind.config.js

import plugin from 'tailwindcss';

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,tsx}"],
  theme: {
    colors: {
  transparent: 'transparent',
  current: 'currentColor',
  'white': '#ffffff',
  'purple': '#3f3cbb',
  'midnight': '#121063',
  'metal': '#565584',
  'tahiti': '#3ab7bf',
  'silver': '#ecebff',
  'bubble-gum': '#ff77e9',
  'bermuda': '#78dcca',
}
  },
  plugins: [
    plugin(function ({ addComponents, addUtilities }) {
      addUtilities({
        '.test-1': { 
          background: 'red'
        },
      });
      addComponents({
        '.test-2': { 
          background: 'cyan'
        },
      });
    }),
  ],
}

App.tsx

export const App = () => {
  return (
    <section>
      <div className="test-1">
        123
      </div>
      <div className="test-2">
        456
      </div>
    </section>
  )
}

After coding I run command:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Also I checked output.css and there are no .test-1 and .test-2 css-selectors. Colors defined in config are work, which means that tailwind library is connected, but without plugins.

It seems you are using the wrong imported function to register your plugin in your Tailwind configuration file. As per the documentation, you'd want to use tailwindcss/plugin:

import plugin from 'tailwindcss/plugin';