Filament•6mo 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

daisy21OP•6mo 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/**',
            ],
        }),
    ],
})

daisy21OP•6mo 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.

daisy21OP•6mo 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•6mo ago

Did you run npm run build?

daisy21OP•6mo 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•6mo 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 //

daisy21OP•6mo ago

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

BlackShadow•6mo 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•6mo ago

Have you added @filamentStyles to your layout?

daisy21OP•6mo 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•6mo ago

Pretty sure you tailwind config is messed up.

daisy21OP•6mo ago

yes i cant find the problem app.css

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

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

BlackShadow•6mo 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.

daisy21OP•6mo ago

app.js

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

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

BlackShadow•6mo 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 🤷‍♂️

daisy21OP•6mo ago

"mt-1 border-none bg-white shadow-sm ring-1 transition duration-75 checked:ring-0 focus:ring-2 focus:ring-offset-0 disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-current disabled:checked:text-gray-400 dark:bg-white/5 dark:disabled:bg-transparent dark:disabled:checked:bg-gray-600 text-primary-600 ring-gray-950/10 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:ring-white/20 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 dark:disabled:ring-white/10">

"mt-1 border-none bg-white shadow-sm ring-1 transition duration-75 checked:ring-0 focus:ring-2 focus:ring-offset-0 disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-current disabled:checked:text-gray-400 dark:bg-white/5 dark:disabled:bg-transparent dark:disabled:checked:bg-gray-600 text-primary-600 ring-gray-950/10 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:ring-white/20 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 dark:disabled:ring-white/10">

this is the class in the radio button do you think its because the dark: thing ring-primary-500/50 i cant find this class so if i change the old class from the v2 in ie focus:ring-primary-500 h-4 w-4 text-primary-600 disabled:opacity-70 border-gray-300 it just this, it works in the v3 do you think it maybe because of alpine? or the multiple instances running problem? as you can see there is select.js error here

BlackShadow•6mo ago

🤷‍♂️

daisy21OP•6mo ago

for the record i did try making new component and just add radio button , and still the same

BlackShadow•6mo ago

Yea so your classes are not being picked up Not sure how i can help you more, check your configs, check your stylesheet.

Gaming

Programming

Form outside panel wont apply some classes