Filament•3mo ago

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,
    ],
}

/** @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: {},
  },
}

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

    tailwindcss: {},
    autoprefixer: {},
  },
}

19 Replies

daisy21•3mo ago

this is vite.config.js

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/filament-chart-js-plugins.js',
                'resources/css/filament/admin/theme.css' ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',

                'app/Forms/Components/**',
            ],
        }),
    ],
})

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/filament-chart-js-plugins.js',
                'resources/css/filament/admin/theme.css' ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',

                'app/Forms/Components/**',
            ],
        }),
    ],
})

daisy21•3mo ago

FormPermohonan.php -> https://pastebin.com/vAP53qgx this is the form livewire component in \app\Livewire\FormPermohonan.php

Pastebin

FormPermohonan.php - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

daisy21•3mo ago

and this is the view livewire.form-permohonan

<div class="bg-white border border-gray-300 shadow-sm rounded-xl ">
    <form wire:submit="submit">
        {{ $this->form }}


    </form>
</div>


@section('headerlivewire')
<section class="counts">
    <div class="container aos-init aos-animate" data-aos="fade-up">
        <header class="section-header2">
          <!-- <h2>Layanan PPID</h2> -->

          <p>FORMULIR PERMOHONAN INFORMASI</p>
          <h2>Silahkan Lengkapi Formulir Permohonan Informasi Berikut</h2>
        </header>


    </div>
</section>
@endsection
@section('custom-js')
<script>

</script>
@endsection

<div class="bg-white border border-gray-300 shadow-sm rounded-xl ">
    <form wire:submit="submit">
        {{ $this->form }}


    </form>
</div>


@section('headerlivewire')
<section class="counts">
    <div class="container aos-init aos-animate" data-aos="fade-up">
        <header class="section-header2">
          <!-- <h2>Layanan PPID</h2> -->

          <p>FORMULIR PERMOHONAN INFORMASI</p>
          <h2>Silahkan Lengkapi Formulir Permohonan Informasi Berikut</h2>
        </header>


    </div>
</section>
@endsection
@section('custom-js')
<script>

</script>
@endsection

https://discord.com/channels/883083792112300104/1216879194357895189/1216881411298951208 i've alr tried this too

BlackShadow•3mo ago

Did you run npm run build?

daisy21•3mo ago

can you help me on what else should i add here to make it more clear to people? yes i did ,thats why im saying in the post that my other component (table) is working fine in the front end. and only form thats messed up

BlackShadow•3mo ago

Is that custom form part of the layout? (Where the styles are) Where is this custom view located? Because you added './resources/views/livewire//*.blade.php' but it has double //

daisy21•3mo ago

\resources\views\livewire\form-permohonan.blade.php its here and all of my other components are there too and works fine

BlackShadow•3mo ago

Check your tailwind.config.js and change ./resources/views/livewire//*.blade.php to ./resources/views/livewire/*.blade.php and run npm run build and try again.

krekas•3mo ago

Have you added @filamentStyles to your layout?

daisy21•3mo ago

nope no luck, this is my console says. i tried to disable livewire inject and no multiple instance running but the style is missing if i do that and this is whats in my layout

 @filamentStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])

 @filamentStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])

this is just above </head> in my layout and @filamentScripts above </body>

BlackShadow•3mo ago

Pretty sure you tailwind config is messed up.

daisy21•3mo ago

yes i cant find the problem app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

BlackShadow•3mo ago

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
    ],
}

Try this.

daisy21•3mo ago

app.js

import Chart from 'chart.js/auto'
window.Chart = Chart

import Chart from 'chart.js/auto'
window.Chart = Chart

BlackShadow•3mo ago

Double-check your Tailwind configuration and verify if the classes are present in the stylesheet. If the classes are missing, it means your configuration isn't detecting your Blade files. You'll need to check your configuration settings. That's all the help I can provide 🤷‍♂️

Gaming

Programming

Form outside panel wont apply some classes