Skip to content

Commit 833295d

Browse files
oliviertassinarioliviertassinari
committed
[docs-infra] Polish Tailwind CSS demos
1 parent 9d29815 commit 833295d

File tree

50 files changed

+184
-113
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+184
-113
lines changed

‎docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -47,31 +47,31 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
4747
{...getRootProps(other)}
4848
ref={rootRef}
4949
className={clsx(
50-
'flex gap-[5px] pr-[5px] overflow-hidden w-80 rounded-lg bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-700 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)]',
50+
'flex w-80 gap-[5px] overflow-hidden rounded-lg border border-solid border-gray-200 bg-white pr-[5px] shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] hover:border-violet-400 focus-visible:outline-0 dark:border-gray-700 dark:bg-gray-800 dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)] dark:hover:border-violet-400',
5151
!focused &&
5252
'shadow-[0_2px_2px_transparent] shadow-gray-50 dark:shadow-gray-900',
5353
focused &&
54-
'border-violet-400 dark:border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:shadow-violet-500',
54+
'border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:border-violet-400 dark:shadow-violet-500',
5555
)}
5656
>
5757
<input
5858
id={id}
5959
disabled={disabled}
6060
readOnly={readOnly}
6161
{...getInputProps()}
62-
className="text-sm leading-[1.5] text-gray-900 dark:text-gray-300 bg-inherit border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto"
62+
className="shrink-0 grow basis-auto rounded-[inherit] border-0 bg-inherit px-3 py-2 text-sm leading-[1.5] text-gray-900 outline-0 dark:text-gray-300"
6363
/>
6464
{hasClearIcon && (
6565
<Button
6666
{...getClearProps()}
67-
className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
67+
className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
6868
>
6969
<ClearIcon className="translate-y-[2px] scale-90" />
7070
</Button>
7171
)}
7272
<Button
7373
{...getPopupIndicatorProps()}
74-
className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
74+
className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
7575
>
7676
<ArrowDropDownIcon
7777
className={clsx('translate-y-[2px]', popupOpen && 'rotate-180')}
@@ -94,23 +94,23 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
9494
>
9595
<ul
9696
{...getListboxProps()}
97-
className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
97+
className="z-[1] mx-0 my-3 box-border max-h-[300px] min-w-[320px] overflow-auto rounded-xl border border-solid border-gray-200 bg-white p-1.5 text-sm text-gray-900 shadow-[0_4px_30px_transparent] shadow-gray-200 outline-0 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 dark:shadow-gray-900"
9898
>
9999
{groupedOptions.map((option, index) => {
100100
const optionProps = getOptionProps({ option, index });
101101

102102
return (
103103
<li
104104
{...optionProps}
105-
className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 dark:aria-selected:bg-violet-900 aria-selected:text-violet-900 dark:aria-selected:text-violet-100 ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100"
105+
className="ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100 cursor-default list-none rounded-lg p-2 last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 aria-selected:text-violet-900 dark:aria-selected:bg-violet-900 dark:aria-selected:text-violet-100"
106106
>
107107
{option.label}
108108
</li>
109109
);
110110
})}
111111

112112
{groupedOptions.length === 0 && (
113-
<li className="list-none p-2 cursor-default">No results</li>
113+
<li className="cursor-default list-none p-2">No results</li>
114114
)}
115115
</ul>
116116
</Popper>

‎docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -49,31 +49,31 @@ const Autocomplete = React.forwardRef(function Autocomplete(
4949
{...getRootProps(other)}
5050
ref={rootRef}
5151
className={clsx(
52-
'flex gap-[5px] pr-[5px] overflow-hidden w-80 rounded-lg bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-700 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)]',
52+
'flex w-80 gap-[5px] overflow-hidden rounded-lg border border-solid border-gray-200 bg-white pr-[5px] shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] hover:border-violet-400 focus-visible:outline-0 dark:border-gray-700 dark:bg-gray-800 dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)] dark:hover:border-violet-400',
5353
!focused &&
5454
'shadow-[0_2px_2px_transparent] shadow-gray-50 dark:shadow-gray-900',
5555
focused &&
56-
'border-violet-400 dark:border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:shadow-violet-500',
56+
'border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:border-violet-400 dark:shadow-violet-500',
5757
)}
5858
>
5959
<input
6060
id={id}
6161
disabled={disabled}
6262
readOnly={readOnly}
6363
{...getInputProps()}
64-
className="text-sm leading-[1.5] text-gray-900 dark:text-gray-300 bg-inherit border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto"
64+
className="shrink-0 grow basis-auto rounded-[inherit] border-0 bg-inherit px-3 py-2 text-sm leading-[1.5] text-gray-900 outline-0 dark:text-gray-300"
6565
/>
6666
{hasClearIcon && (
6767
<Button
6868
{...getClearProps()}
69-
className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
69+
className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
7070
>
7171
<ClearIcon className="translate-y-[2px] scale-90" />
7272
</Button>
7373
)}
7474
<Button
7575
{...getPopupIndicatorProps()}
76-
className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
76+
className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
7777
>
7878
<ArrowDropDownIcon
7979
className={clsx('translate-y-[2px]', popupOpen && 'rotate-180')}
@@ -96,23 +96,23 @@ const Autocomplete = React.forwardRef(function Autocomplete(
9696
>
9797
<ul
9898
{...getListboxProps()}
99-
className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
99+
className="z-[1] mx-0 my-3 box-border max-h-[300px] min-w-[320px] overflow-auto rounded-xl border border-solid border-gray-200 bg-white p-1.5 text-sm text-gray-900 shadow-[0_4px_30px_transparent] shadow-gray-200 outline-0 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 dark:shadow-gray-900"
100100
>
101101
{(groupedOptions as typeof top100Films).map((option, index) => {
102102
const optionProps = getOptionProps({ option, index });
103103

104104
return (
105105
<li
106106
{...optionProps}
107-
className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 dark:aria-selected:bg-violet-900 aria-selected:text-violet-900 dark:aria-selected:text-violet-100 ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100"
107+
className="ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100 cursor-default list-none rounded-lg p-2 last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 aria-selected:text-violet-900 dark:aria-selected:bg-violet-900 dark:aria-selected:text-violet-100"
108108
>
109109
{option.label}
110110
</li>
111111
);
112112
})}
113113

114114
{groupedOptions.length === 0 && (
115-
<li className="list-none p-2 cursor-default">No results</li>
115+
<li className="cursor-default list-none p-2">No results</li>
116116
)}
117117
</ul>
118118
</Popper>

‎docs/data/base/components/badge/UnstyledBadge/tailwind/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function UnstyledBadge() {
1616
return (
1717
<div className={isDarkMode ? 'dark' : ''}>
1818
<Badge badgeContent={5}>
19-
<span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
19+
<span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
2020
</Badge>
2121
</div>
2222
);

‎docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function UnstyledBadge() {
1515
return (
1616
<div className={isDarkMode ? 'dark' : ''}>
1717
<Badge badgeContent={5}>
18-
<span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
18+
<span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
1919
</Badge>
2020
</div>
2121
);

‎docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function UnstyledBadgeIntroduction() {
1616
return (
1717
<div className={isDarkMode ? 'dark' : ''}>
1818
<Badge badgeContent={5}>
19-
<span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
19+
<span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
2020
</Badge>
2121
</div>
2222
);

‎docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function UnstyledBadgeIntroduction() {
1515
return (
1616
<div className={isDarkMode ? 'dark' : ''}>
1717
<Badge badgeContent={5}>
18-
<span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
18+
<span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
1919
</Badge>
2020
</div>
2121
);

‎docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef((props, ref) => {
3030
<BaseButton
3131
ref={ref}
3232
className={clsx(
33-
'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
33+
'ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:scale-[0.99] active:bg-violet-700 active:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
3434
className,
3535
)}
3636
{...other}

‎docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
3030
<BaseButton
3131
ref={ref}
3232
className={clsx(
33-
'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
33+
'ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:scale-[0.99] active:bg-violet-700 active:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
3434
className,
3535
)}
3636
{...other}

‎docs/data/base/components/form-control/BasicFormControl/css/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
2929
}, [formControlContext]);
3030

3131
if (formControlContext === undefined) {
32-
return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
32+
return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
3333
}
3434

3535
const { error, required, filled } = formControlContext;
@@ -39,7 +39,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
3939
<p
4040
ref={ref}
4141
className={clsx(
42-
'text-sm mb-1',
42+
'mb-1 text-sm',
4343
classNameProp,
4444
error || showRequiredError ? 'invalid text-red-500' : '',
4545
)}

‎docs/data/base/components/form-control/BasicFormControl/css/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const Label = React.forwardRef<
3131
}, [formControlContext]);
3232

3333
if (formControlContext === undefined) {
34-
return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
34+
return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
3535
}
3636

3737
const { error, required, filled } = formControlContext;
@@ -41,7 +41,7 @@ const Label = React.forwardRef<
4141
<p
4242
ref={ref}
4343
className={clsx(
44-
'text-sm mb-1',
44+
'mb-1 text-sm',
4545
classNameProp,
4646
error || showRequiredError ? 'invalid text-red-500' : '',
4747
)}

‎docs/data/base/components/form-control/BasicFormControl/tailwind/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
4444
}, [formControlContext]);
4545

4646
if (formControlContext === undefined) {
47-
return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
47+
return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
4848
}
4949

5050
const { error, required, filled } = formControlContext;
@@ -54,7 +54,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
5454
<p
5555
ref={ref}
5656
className={clsx(
57-
'text-sm mb-1',
57+
'mb-1 text-sm',
5858
classNameProp,
5959
error || showRequiredError ? 'invalid text-red-500' : '',
6060
)}

‎docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Label = React.forwardRef<
4646
}, [formControlContext]);
4747

4848
if (formControlContext === undefined) {
49-
return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
49+
return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
5050
}
5151

5252
const { error, required, filled } = formControlContext;
@@ -56,7 +56,7 @@ const Label = React.forwardRef<
5656
<p
5757
ref={ref}
5858
className={clsx(
59-
'text-sm mb-1',
59+
'mb-1 text-sm',
6060
classNameProp,
6161
error || showRequiredError ? 'invalid text-red-500' : '',
6262
)}

0 commit comments

Comments
 (0)