Css on Filters issue

[amedeopro]

Hello,
I have problems with the filters, they have a completely wrong style compared to what I see in the demos, how can I fix it? The multiselect is not a dropdown (MultiSelectDropdownFilter) and TextFilters have no padding etc.

Laravel ver. 9.52.10
Livewire ver. 2.12.3
rappasoft/laravel-livewire-tables ver. 2.15.0
Tailwind

No issue in console

Thank you

[lrljoe]

Are you using Tailwind v2 or v3?
Are you using Tailwind locally or via a CDN?
If locally - have you included the files correctly into your build? See here for details

[amedeopro]

Are you using Tailwind v2 or v3? Tailwind 3.3.1
Are you using Tailwind locally or via a CDN? locally
If locally - have you included the files correctly into your build? Yes, i have included the files correctly

[lrljoe]

Okay, for starters, your Vite config is incorrect, see Laravel Docs for more info, as this may be the cause of your issue.

I'd always suggest that you add in the following to your TW content: []

        './app/Http/Livewire/*.blade.php',
        './app/Http/Livewire/**/*.blade.php',

This is definitely not a package issue, and is 100% an issue with your Vite/Tailwind config, not a problem, happy to try and help you resolve it.

Do you get any errors when running the following?

npm run build

Have you included TW elements in your app.css?
Have you correctly included the relevant elements using Vite in your layout?
Have you previously published the views for this package? If so - I suggest you remove them, as there have been numerous blade changes within this package recently!

[amedeopro]

No errors when running this

npm run build

Have you included TW elements in your app.css? yes
Have you correctly included the relevant elements using Vite in your layout? yes
Have you previously published the views for this package? No

i have added

        './app/Http/Livewire/*.blade.php',
        './app/Http/Livewire/**/*.blade.php',

even if there are no .blade files in those directories, but the result does not change.

According to the documentation my vite.config.js would appear to be correct
https://laravel.com/docs/9.x/vite#advanced-customization
https://laravel.com/docs/9.x/vite#blade-refreshing-on-save

can you point me out where you spot errors in my vite config ?

[lrljoe]

I can take a quick look

Please include your tailwind.config.js, vite.config.js, and your package.json for good measure.

if the site is public, then a link helps too

[amedeopro]

Thank you, the site is not public

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    presets: [
            require('./vendor/wireui/wireui/tailwind.config.js'),
    ],
  content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      './app/Http/Livewire/*.blade.php',
      './app/Http/Livewire/**/*.blade.php',
      './vendor/wireui/wireui/resources/**/*.blade.php',
      './vendor/wireui/wireui/ts/**/*.ts',
      './vendor/wireui/wireui/src/View/**/*.php',
      './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',

  ],
  theme: {
    extend: {
        colors: {
            'videomood': {
                '50': '#f4f6f9',
                '100': '#e9ecf2',
                '200': '#c9d0df',
                '300': '#a9b4cc',
                '400': '#687ba5',
                '500': '#27437f',
                '600': '#233c72',
                '700': '#1d325f',
                '800': '#17284c',
                '900': '#13213e'
            }
        },
    },
  },
  plugins: [
      require("@tailwindcss/forms")({
          strategy: 'class',
      }),
      require('@tailwindcss/aspect-ratio'),
      require('@tailwindcss/typography'),
  ],
}

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.9",
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "flowbite": "^1.6.4",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.21",
        "tailwindcss": "^3.3.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@alpinejs/focus": "^3.12.2",
        "alpinejs": "^3.12.0",
        "flatpickr": "^4.6.13",
        "slim-select": "^2.5.1",
        "tom-select": "^2.2.2"
    }
}

[lrljoe]

Okay, so you have the relevant NodeJS packages installed, you're just not making use of them for some reason!

In your tailwind.config.js, ensure you include the default theme:

/** @type {import('tailwindcss').Config} */

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

module.exports = {

In your vite.config.js, add a postcss referral:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
            postcss: [
                tailwindcss(),
                autoprefixer(),
            ],
        }),
    ],

Create a postcss.config.js file in your project root

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},

    }
}

Then run your build process, this will then allow Vite to build your Tailwind file correctly.

As another point, you may want to relocate your resources/js/app.css as an import into your resources/js/app.js.

Make sure you are referencing the @tailwind items in your app.css!

If this doesn't work, then if you join the official Discord, drop me a message and you can screen-share if you're comfy doing that. I'm fairly active most evenings.