Datatables Unstyled Laravel 10 + Breeze

[vestaxpdx]

Hi

I have followed: https://tailwind-elements.com/docs/standard/integrations/laravel-integration/

The data table is working as the headers are sortable when clicked. But the bottom rows per page meta data is all messed up.

What is going on here? I have stopped and started vite with npm run dev but still it is the same. Have I missed something obvious?

app.js

import './bootstrap';

import { Datatable, Input, Select, initTE } from "tw-elements";
initTE({ Datatable, Input, Select });

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, require("tw-elements/dist/plugin.cjs")],
};

[juujisai]

Hi! Does the rest of the table look ok? Does it apply styles in the inspect tools of your browser? I see you are importing bootstrap. Try commenting this out and see if anything changes