Header misalign using Tailwind CSS (Tech. preview) with scrollX: true

choc

Link to test case: https://live.datatables.net/xunuceji/1/watch?html,js,output
Description of problem:

When using dataTables.tailwindcss.js and if the table can be scrolled in x-direction, the issue of misalignment of the head is observed. If the view width is larger (no scrollbar is displayed), the header is aligned.

You can remove these two lines and see that the issue only happens when they are used.

<script src="https://cdn.datatables.net/2.1.8/js/dataTables.tailwindcss.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

It seems that the padding of the header cell (thead.cell) is not taken into account.

After I comment out this part:

// Default class modification
$.extend( true, DataTable.ext.classes, {
    container: "dt-container dt-tailwindcss",
    search: {
        input: "border placeholder-gray-500 ml-2 px-3 py-2 rounded-lg border-gray-200 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:placeholder-gray-400"
    },
    length: {
        select: "border px-3 py-2 rounded-lg border-gray-200 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500"
    },
    processing: {
        container: "dt-processing"
    },
    paging: {
        active: 'font-semibold bg-gray-100 dark:bg-gray-700/75',
        notActive: 'bg-white dark:bg-gray-800',
        button: 'relative inline-flex justify-center items-center space-x-2 border px-4 py-2 -mr-px leading-6 hover:z-10 focus:z-10 active:z-10 border-gray-200 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:active:border-gray-700',
        first: 'rounded-l-lg',
        last: 'rounded-r-lg',
        enabled: 'text-gray-800 hover:text-gray-900 hover:border-gray-300 hover:shadow-sm focus:ring focus:ring-gray-300 focus:ring-opacity-25 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600 dark:focus:ring-opacity-40',
        notEnabled: 'text-gray-300 dark:text-gray-600'
    },
    table: 'dataTable min-w-full text-sm align-middle whitespace-nowrap',
    thead: {
        row: 'border-b border-gray-100 dark:border-gray-700/50',
        cell: 'px-3 py-4 text-gray-900 bg-gray-100/75 font-semibold text-left dark:text-gray-50 dark:bg-gray-700/25'
    },
    tbody: {
        row: 'even:bg-gray-50 dark:even:bg-gray-900/50',
        cell: 'p-3'
    },
    tfoot: {
        row: 'even:bg-gray-50 dark:even:bg-gray-900/50',
        cell: 'p-3 text-left'
    },
} );

More precisely, just commenting on this part will make the problem disappear:

thead: {
    row: 'border-b border-gray-100 dark:border-gray-700/50',
    cell: 'px-3 py-4 text-gray-900 bg-gray-100/75 font-semibold text-left dark:text-gray-50 dark:bg-gray-700/25'
},
tbody: {
    row: 'even:bg-gray-50 dark:even:bg-gray-900/50',
    cell: 'p-3'
},

I make a test to only remove the padding (px-3) from the header cell. The problem disappears!

thead: {
    row: 'border-b border-gray-100 dark:border-gray-700/50',
    cell: 'py-4 text-gray-900 bg-gray-100/75 font-semibold text-left dark:text-gray-50 dark:bg-gray-700/25'
},
tbody: {
    row: 'even:bg-gray-50 dark:even:bg-gray-900/50',
    cell: 'p-3'
},

Maybe we need to take the padding into account when calculating the column width?

(yeah. Calling columns.adjust() would also work)