PostCSS problem

[timber sandal]

postcss.config.js ```module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};

tailwindcss.js ```/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')

export default {
darkMode: ['class'],
content: [
'./pages//*.{ts,tsx}',
'./components//.{ts,tsx}',
'./app/**/.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',

  },
},
extend: {
  colors: {
    'primary-500': '#877EFF',
    'primary-600': '#5D5FEF',
    'secondary-500': '#FFB620',
    'off-white': '#D0DFFF',
    'red': '#FF5A5A',
    'dark-1': '#000000',
    'dark-2': '#09090A',
    'dark-3': '#101012',
    'dark-4': '#1F1F22',
    'light-1': '#FFFFFF',
    'light-2': '#EFEFEF',
    'light-3': '#7878A3',
    'light-4': '#5C5C7B',
  },
  screens: {
    'xs': '480px',
  
  },
  width: {
    '420': '420px',
    '465': '465px',
  },
  fontFamily: {
    inter: ['Inter', 'sans-serif'],

  },
  keyframes: {
    'accordion-down': {
      from: { height: 0 },
      to: { height: 'var(--radix-accordion-content-height)' },
    },
    'accordion-up': {
      from: { height: 'var(--radix-accordion-content-height)' },
      to: { height: 0 },
    },
  },
  animation: {
    'accordion-down': 'accordion-down 0.2s ease-out',
    'accordion-up': 'accordion-up 0.2s ease-out',
  },
},

},
plugins: [require('tailwindcss-animate')],
};```

and error [plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

[uncut mirage]

Are you using Tailwind v4? Have you tried following what the error said?

I suppose this happened because: Tailwind v4 don't use PostCSS any more, and have transitioned to become a pure Vite plugin. You can likely find more info about this on Tailwind website ?