© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•2y ago•
31 replies
daisy21

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
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,
    ],
}
/** @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
postcss.config.js

export default {
  plugins: {
    'tailwindcss/nesting': 'postcss-nesting',

    tailwindcss: {},
    autoprefixer: {},
  },
}
export default {
  plugins: {
    'tailwindcss/nesting': 'postcss-nesting',

    tailwindcss: {},
    autoprefixer: {},
  },
}
image.png
image.png
image.png
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Help with form outside Panel
FilamentFFilament / ❓┊help
16mo ago
Filament Form Outside Admin Panel
FilamentFFilament / ❓┊help
2y ago
Reuse Filament Login and Registration Form outside the panel
FilamentFFilament / ❓┊help
16mo ago
How to create form with Filament styles outside the panel?
FilamentFFilament / ❓┊help
12mo ago