Form outside panel wont apply some classes

i just upgrade from v2 to v3, been following all guides and docs, and i manage to almost finish the upgrade.
so the case is i have a form in my front end that wont apply some styling as shown on the image the radio checked doesnt have any style and only showing blank white dot. and for the other field if on focus there is no focus style applied.
yet what confused me is all of the other livewire components like tables and widgets works well as shown on the other image.

here is my tailwind.config.js
/** @type {import('tailwindcss').Config} */
import colors from 'tailwindcss/colors'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import preset from './vendor/filament/support/tailwind.config.preset'
export default {
    presets: [preset],
    darkMode: 'selector',
    content: [
       './app/Filament/**/*.php',
       "./resources/**/**/**/**/*.blade.php",
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './app/Livewire//*.php',
        './resources/views/livewire//*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },
    plugins: [
        forms,
        typography,
    ],
}


and this is my postcss.config.js
export default {
  plugins: {
    'tailwindcss/nesting': 'postcss-nesting',

    tailwindcss: {},
    autoprefixer: {},
  },
}
image.png
image.png
image.png
Was this page helpful?