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.

>Solution :

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';