[QUESTION - NOT ISSUE] - Interested In A Tailwind CSS File?

[BayBreezy]

Great package ma guy

Thanks a lot It has really helped while I was waiting on Vuetify to get v3 out and to add the Datatable component.

I created a TailwindCSS file, not sure if you would be interested.

It works if you are using tailwindcss(as you can see from the @apply directives 😆 ) I also have the TailwindCSS Forms package installed I didn't import the default styles

Click To See CSS

```css .vue3-easy-data-table { @apply w-full overflow-x-auto rounded-lg shadow bg-white ring-1 ring-slate-200; } /* Table container */ .vue3-easy-data-table__main { @apply overflow-x-auto; } /* Scrollbar styles */ .vue3-easy-data-table__main::-webkit-scrollbar { @apply h-[9px] bg-transparent cursor-pointer; } .vue3-easy-data-table__main::-webkit-scrollbar-track { @apply bg-transparent; } .vue3-easy-data-table__main::-webkit-scrollbar-thumb { @apply bg-slate-300 hover:bg-slate-400 transition cursor-pointer; } /* Border cell */ .vue3-easy-data-table .border-cell tr td, .vue3-easy-data-table .border-cell tr th { @apply last:border-none border-r border-slate-200; } .vue3-easy-data-table .border-cell tr td.can-expand, .vue3-easy-data-table .border-cell tr th { @apply border-r-0; } /* Table */ .vue3-easy-data-table table { width: 100%; } /* Teableheader row */ .vue3-easy-data-table__header tr { @apply bg-slate-100 border-b; } /* Table header th tag */ .vue3-easy-data-table__header tr th { @apply text-left p-4 font-medium capitalize text-sm relative whitespace-nowrap select-none; } /* Fixed header */ .vue3-easy-data-table__main.fixed-header.show-shadow.table-fixed .shadow { @apply bg-white border-r; } /* table head sort icons */ /* None */ .vue3-easy-data-table__header tr th.sortable.none .sortType-icon { @apply border hover:bg-primary-400 ml-3 border-slate-400 inline-block p-1 -rotate-45 transition duration-300 cursor-pointer; } /* Asce */ .vue3-easy-data-table__header tr th.sortable.asc .sortType-icon { @apply border-t-2 border-r-2 ml-3 border-primary inline-block p-1 -rotate-45 transition duration-300 cursor-pointer; } /* Desc */ .vue3-easy-data-table__header tr th.sortable.desc .sortType-icon { @apply border-b-2 border-l-2 ml-3 border-primary inline-block p-1 -rotate-45 transition duration-300 cursor-pointer; } /* make sortable headers use cursor pointer */ .vue3-easy-data-table__header tr th.sortable { @apply cursor-pointer; } /* Table body td tag */ .vue3-easy-data-table__body tr td { @apply border-b; } .vue3-easy-data-table__body tr td { @apply p-4 py-5 text-sm font-light; } /* Table body tr */ .vue3-easy-data-table__body.row-alternation tr { @apply even:bg-slate-50 hover:bg-slate-100 transition; } /* Expand slot */ .vue3-easy-data-table__body tr td.expand { @apply px-3 py-1; } /* Expand Icon */ .expand-icon { @apply border-t border-r border-slate-500 inline-block p-1 -rotate-45 transition duration-300 cursor-pointer; } .expand-icon.expanding { @apply rotate-[225deg] border-primary bg-primary; } /* Footer */ .vue3-easy-data-table__footer { @apply flex flex-col items-start gap-5 lg:flex-row lg:items-center w-full px-6 py-5 text-sm border-t; } /* Rows per page */ .pagination__rows-per-page { @apply flex text-sm capitalize gap-x-3; } /* Row selector */ .easy-data-table__rows-selector { @apply flex relative; } /* Select input box */ .rows-input__wrapper { @apply border-b border-slate-400 flex gap-x-2 items-center justify-between pb-1 px-3 cursor-pointer; } .rows-input__wrapper .triangle { @apply inline-block h-2 w-2 border-4 border-transparent border-t-primary; } /* Selction dropdown */ .vue3-easy-data-table__footer .select-items { @apply hidden bg-white shadow-md rounded-md divide-y overflow-hidden transition duration-300; } .vue3-easy-data-table__footer .select-items.show { @apply block absolute -top-[120px]; } /* Select items inside dropdown */ .vue3-easy-data-table__footer .select-items.show li { @apply px-2 py-1 cursor-pointer hover:bg-primary-300; } .vue3-easy-data-table__footer .select-items.show li.selected { @apply bg-primary text-white; } /* Paging buttons */ .buttons-pagination { @apply flex gap-x-2 items-center; } /* Button items */ .buttons-pagination .item.button { @apply flex items-center justify-center h-7 w-7 border rounded-full cursor-pointer transition text-xs; } .buttons-pagination .item.button.active { @apply bg-gradient-to-r from-primary-400 via-primary to-primary-800 text-white border-primary-400; } /* Page index */ .pagination__items-index { @apply grow; } /* Paging arrows */ .previous-page__click-button, .next-page__click-button { @apply my-0 mx-1 cursor-pointer hidden lg:block; } .previous-page__click-button .arrow, .next-page__click-button .arrow { @apply inline-block w-2 h-2 border-t-2 border-l-2 border-slate-400; } .previous-page__click-button .arrow.arrow-left, .next-page__click-button .arrow.arrow-left { @apply rotate-[135deg]; } .previous-page__click-button .arrow.arrow-right, .next-page__click-button .arrow.arrow-right { @apply rotate-[-45deg]; } /* Check box */ .easy-checkbox { @apply relative w-5 h-5 my-0; } .easy-checkbox label { @apply cursor-pointer before:absolute before:inset-y-0 before:w-5 before:h-5; } ```

Here is what it looks like

All the best! 👋🏽

[HC200ok]

Looks great!

I will add a new column in online document for introducing how to customize the vue3-easy-data-table style with TailwindCSS by referring to your case.

[BayBreezy]

Awesome. Let me update the CSS then lol

[HC200ok]

@BayBreezy I have no experience of using Tailwind CSS, could you do me a favor and provide a demo to show how to use this table component with tailwind CSS? here is a codesandbox you can edit: https://codesandbox.io/s/via-cdn-composition-api-forked-ut2m27?file=/index.html

[pezexd]

Thank you for this!

[BayBreezy]

Hey @HC200ok , sorry for the delay.

Here is the link -> https://codesandbox.io/s/via-cdn-composition-api-forked-n0322l?file=/index.html

@pezexd , you are welcome

[HC200ok]

@BayBreezy Thanks a lot! The demo has been added: https://hc200ok.github.io/vue3-easy-data-table-doc/tailwind.html

[BayBreezy]

Awesome 🕺🕺

[stefanschlipfi]

Amazing thanks a lot 👌