Skip to content

Remove deprecated Tailwind utilities, replace with equivalent alternatives #442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Remove deprecated Tailwind utilities, replace with equivalent alternatives #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d6031a
Remove deprecated Tailwind utilities, replace with equivalent alterna…
Mlekar Jan 24, 2025
2cb1a42
Remove deprecated Tailwind utilities, replace with equivalent alterna…
Mlekar Jan 24, 2025
d92abc9
Rename utilities for shadow, outline, rounded, ring to new defaults, …
Mlekar Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -612,36 +612,36 @@ Alternatively you can define class names directly by passing them to the `Multis

```vue
<Multiselect ... :classes="{
container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none',
container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded-sm bg-white text-base leading-snug outline-hidden',
containerDisabled: 'cursor-default bg-gray-100',
containerOpen: 'rounded-b-none',
containerOpenTop: 'rounded-t-none',
containerActive: 'ring ring-green-500 ring-opacity-30',
wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
containerActive: 'ring-3 ring-green-500/30',
wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-hidden',
singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
singleLabelText: 'text-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
search: 'w-full absolute inset-0 outline-hidden focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded-sm pl-3.5 rtl:pl-0 rtl:pr-3.5',
tags: 'grow shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded-sm mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
tagWrapper: 'whitespace-nowrap overflow-hidden text-ellipsis',
tagWrapperBreak: 'whitespace-normal break-all',
tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10 group',
tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
tagsSearch: 'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
tagsSearch: 'absolute inset-0 border-0 outline-hidden focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 shrink-0 grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
caretOpen: 'rotate-180 pointer-events-auto',
clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
clearIcon: 'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0 rtl:mr-0 rtl:ml-3.5',
infinite: 'flex items-center justify-center w-full',
infiniteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
infiniteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin shrink-0 grow-0 m-3.5',
dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b-sm',
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm',
dropdownHidden: 'hidden',
options: 'flex flex-col p-0 m-0 list-none',
optionsTop: '',
Expand All @@ -652,24 +652,24 @@ Alternatively you can define class names directly by passing them to the `Multis
groupLabelSelected: 'bg-green-600 text-white',
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
groupLabelSelectedDisabled: 'text-green-100 bg-green-600/50 cursor-not-allowed',
groupOptions: 'p-0 m-0',
option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
optionPointed: 'text-gray-800 bg-gray-100',
optionSelected: 'text-white bg-green-500',
optionDisabled: 'text-gray-300 cursor-not-allowed',
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
optionSelectedDisabled: 'text-green-100 bg-green-500/50 cursor-not-allowed',
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
assist: 'absolute -m-px w-px h-px overflow-hidden',
spacer: 'h-9 py-px box-content'
}" />
```

Certain classes has different states which are merged to the base class when the state is active. For example `dropdown` will be merged with `dropdownTop` when `open-direction: 'top'` resulting in the following classes:
```absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b -translate-y-full top-px bottom-auto rounded-b-none rounded-t```
```absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b-sm -translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm```

The same is true for `container`, `tag`, `options`, `groupLabel` and `option` classes.

Expand Down
40 changes: 20 additions & 20 deletions themes/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.multiselect {
@apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none;
@apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded-sm bg-white text-base leading-snug outline-hidden;
}
.multiselect.is-disabled {
@apply cursor-default bg-gray-100;
Expand All @@ -11,50 +11,50 @@
@apply rounded-t-none;
}
.multiselect.is-active {
@apply ring ring-green-500 ring-opacity-30;
@apply ring-3 ring-green-500/30;
}

.multiselect-wrapper {
@apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none;
@apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-hidden;
}

.multiselect-single-label {
@apply flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-single-label-text {
@apply overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full;
@apply text-ellipsis overflow-hidden block whitespace-nowrap max-w-full;
}

.multiselect-multiple-label {
@apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-search {
@apply w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5;
@apply w-full absolute inset-0 outline-hidden focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded-sm pl-3.5 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-tags {
@apply flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2;
@apply grow shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2;
}

.multiselect-tag {
@apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1;
@apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded-sm mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1;
}
.multiselect-tag.is-disabled {
@apply pr-2 opacity-50 rtl:pl-2;
}

.multiselect-tag-wrapper {
@apply whitespace-nowrap overflow-hidden overflow-ellipsis;
@apply whitespace-nowrap overflow-hidden text-ellipsis;
}

.multiselect-tag-wrapper-break {
@apply whitespace-normal break-all;
}

.multiselect-tag-remove {
@apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10;
@apply flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10;
}

.multiselect-tag-remove-icon {
Expand All @@ -66,11 +66,11 @@
}

.multiselect-tags-search-wrapper {
@apply inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full;
@apply inline-block relative mx-1 mb-1 grow shrink h-full;
}

.multiselect-tags-search {
@apply absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full;
@apply absolute inset-0 border-0 outline-hidden focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full;
}

.multiselect-tags-search-copy {
Expand All @@ -82,37 +82,37 @@
}

.multiselect-caret {
@apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5;
@apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 shrink-0 grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5;
}
.multiselect-caret.is-open {
@apply rotate-180 pointer-events-auto;
}

.multiselect-clear {
@apply pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5;
@apply pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5;
}

.multiselect-clear-icon {
@apply bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block;
}

.multiselect-spinner {
@apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5;
@apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0 rtl:mr-0 rtl:ml-3.5;
}

.multiselect-inifite {
@apply flex items-center justify-center w-full;
}

.multiselect-inifite-spinner {
@apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5;
@apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin shrink-0 grow-0 m-3.5;
}

.multiselect-dropdown {
@apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b;
@apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b-sm;
}
.multiselect-dropdown.is-top {
@apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t;
@apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm;
}
.multiselect-dropdown.is-hidden {
@apply hidden;
Expand Down Expand Up @@ -145,7 +145,7 @@
@apply bg-green-600 text-white opacity-90;
}
.multiselect-group-label.is-selected.is-disabled {
@apply text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed;
@apply text-green-100 bg-green-600/50 cursor-not-allowed;
}

.multiselect-group-options {
Expand All @@ -168,7 +168,7 @@
@apply text-white bg-green-500 opacity-90;
}
.multiselect-option.is-selected.is-disabled {
@apply text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed;
@apply text-green-100 bg-green-500/50 cursor-not-allowed;
}

.multiselect-no-options {
Expand All @@ -180,7 +180,7 @@
}

.multiselect-fake-input {
@apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent;
@apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent;
}

.multiselect-assistive-text {
Expand Down
Loading