Skip to content

Commit 3fb38d9

Browse files
RobinMalfaitRobinMalfait
committed
add the prettier-plugin-tailwindcss plugin, party!
1 parent 644f503 commit 3fb38d9

Some content is hidden

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

46 files changed

+343
-335
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,8 @@
5050
"rimraf": "^3.0.2",
5151
"tslib": "^2.3.1",
5252
"typescript": "^4.5.4"
53+
},
54+
"dependencies": {
55+
"prettier-plugin-tailwindcss": "^0.1.4"
5356
}
5457
}

‎packages/@headlessui-react/src/components/menu/menu.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -496,19 +496,19 @@ describe('Rendering composition', () => {
496496
<Menu.Button>Trigger</Menu.Button>
497497
<div className="outer">
498498
<Menu.Items>
499-
<div className="py-1 inner">
499+
<div className="inner py-1">
500500
<Menu.Item as="button">Item A</Menu.Item>
501501
<Menu.Item as="button">Item B</Menu.Item>
502502
</div>
503-
<div className="py-1 inner">
503+
<div className="inner py-1">
504504
<Menu.Item as="button">Item C</Menu.Item>
505505
<Menu.Item>
506506
<div>
507507
<div className="outer">Item D</div>
508508
</div>
509509
</Menu.Item>
510510
</div>
511-
<div className="py-1 inner">
511+
<div className="inner py-1">
512512
<form className="inner">
513513
<Menu.Item as="button">Item E</Menu.Item>
514514
</form>

‎packages/playground-react/pages/_app.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ function KeyCaster() {
129129
if (keys.length <= 0) return null
130130

131131
return (
132-
<div className="fixed z-50 px-4 py-2 overflow-hidden text-2xl tracking-wide text-blue-100 bg-blue-800 rounded-md shadow cursor-default pointer-events-none select-none right-4 bottom-4">
132+
<div className="pointer-events-none fixed right-4 bottom-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow">
133133
{keys.slice().reverse().join(' ')}
134134
</div>
135135
)
@@ -159,8 +159,8 @@ function MyApp({ Component, pageProps }) {
159159
/>
160160
</Head>
161161

162-
<div className="flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700">
163-
<header className="relative z-10 flex items-center justify-between flex-shrink-0 px-4 py-4 bg-gray-700 border-b border-gray-200 sm:px-6 lg:px-8">
162+
<div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
163+
<header className="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
164164
<NextLink href="/">
165165
<Logo className="h-6" />
166166
</NextLink>

‎packages/playground-react/pages/combobox/combobox-with-pure-tailwind.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ export default function Home() {
4242
: everybody.filter((person) => person.toLowerCase().includes(actualQuery.toLowerCase()))
4343

4444
return (
45-
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
46-
<div className="w-full max-w-xs mx-auto">
47-
<div className="text-xs py-8 font-mono">Selected person: {activePerson}</div>
45+
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
46+
<div className="mx-auto w-full max-w-xs">
47+
<div className="py-8 font-mono text-xs">Selected person: {activePerson}</div>
4848
<div className="space-y-1">
4949
<Combobox
5050
value={activePerson}
@@ -58,15 +58,15 @@ export default function Home() {
5858
</Combobox.Label>
5959

6060
<div className="relative">
61-
<span className="relative inline-flex flex-row rounded-md overflow-hidden shadow-sm border">
61+
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
6262
<Combobox.Input
6363
onChange={(e) => setQuery(e.target.value)}
64-
className="border-none outline-none px-3 py-1"
64+
className="border-none px-3 py-1 outline-none"
6565
/>
66-
<Combobox.Button className="focus:outline-none px-1 bg-gray-100 cursor-default border-l text-indigo-600">
67-
<span className="flex items-center px-2 pointer-events-none">
66+
<Combobox.Button className="cursor-default border-l bg-gray-100 px-1 text-indigo-600 focus:outline-none">
67+
<span className="pointer-events-none flex items-center px-2">
6868
<svg
69-
className="w-5 h-5 text-gray-400"
69+
className="h-5 w-5 text-gray-400"
7070
viewBox="0 0 20 20"
7171
fill="none"
7272
stroke="currentColor"
@@ -82,16 +82,16 @@ export default function Home() {
8282
</Combobox.Button>
8383
</span>
8484

85-
<div className="absolute w-full mt-1 bg-white rounded-md shadow-lg">
86-
<Combobox.Options className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
85+
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
86+
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
8787
{people.map((name) => (
8888
<Combobox.Option
8989
key={name}
9090
value={name}
9191
className={({ active }) => {
9292
return classNames(
93-
'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
94-
active ? 'text-white bg-indigo-600' : 'text-gray-900'
93+
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
94+
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
9595
)
9696
}}
9797
>
@@ -112,7 +112,7 @@ export default function Home() {
112112
active ? 'text-white' : 'text-indigo-600'
113113
)}
114114
>
115-
<svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
115+
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
116116
<path
117117
fillRule="evenodd"
118118
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"

‎packages/playground-react/pages/combobox/command-palette-with-groups.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,26 @@ export default function Home() {
4646
}, new Map())
4747

4848
return (
49-
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
50-
<div className="w-full max-w-lg mx-auto">
49+
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
50+
<div className="mx-auto w-full max-w-lg">
5151
<div className="space-y-1">
5252
<Combobox
5353
as="div"
5454
value={activePerson}
5555
onChange={(person) => setPerson(person)}
56-
className="bg-white w-full shadow-sm border border-black/5 bg-clip-padding rounded overflow-hidden"
56+
className="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm"
5757
>
5858
{({ activeOption }) => {
5959
return (
60-
<div className="flex flex-col w-full">
60+
<div className="flex w-full flex-col">
6161
<Combobox.Input
6262
onChange={(e) => setQuery(e.target.value)}
63-
className="border-none outline-none px-3 py-1 bg-none rounded-none w-full"
63+
className="w-full rounded-none border-none bg-none px-3 py-1 outline-none"
6464
placeholder="Search users…"
6565
displayValue={(item: typeof activeOption) => item?.name}
6666
/>
6767
<div className="flex">
68-
<Combobox.Options className="flex-1 overflow-auto text-base leading-6 shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
68+
<Combobox.Options className="shadow-xs max-h-60 flex-1 overflow-auto text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
6969
{Array.from(groups.entries())
7070
.sort(([letterA], [letterZ]) => letterA.localeCompare(letterZ))
7171
.map(([letter, people]) => (
@@ -77,16 +77,16 @@ export default function Home() {
7777
value={person}
7878
className={({ active }) => {
7979
return classNames(
80-
'flex relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none space-x-4',
81-
active ? 'text-white bg-indigo-600' : 'text-gray-900'
80+
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
81+
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
8282
)
8383
}}
8484
>
8585
{({ active, selected }) => (
8686
<>
8787
<img
8888
src={person.img}
89-
className="w-6 h-6 overflow-hidden rounded-full"
89+
className="h-6 w-6 overflow-hidden rounded-full"
9090
/>
9191
<span
9292
className={classNames(
@@ -103,7 +103,7 @@ export default function Home() {
103103
active ? 'text-white' : 'text-indigo-600'
104104
)}
105105
>
106-
<svg className="w-5 h-5" viewBox="0 0 25 24" fill="none">
106+
<svg className="h-5 w-5" viewBox="0 0 25 24" fill="none">
107107
<path
108108
d="M11.25 8.75L14.75 12L11.25 15.25"
109109
stroke="currentColor"
@@ -123,16 +123,16 @@ export default function Home() {
123123
</Combobox.Options>
124124

125125
{people.length === 0 ? (
126-
<div className="text-center w-full py-4">No person selected</div>
126+
<div className="w-full py-4 text-center">No person selected</div>
127127
) : activeOption === null ? null : (
128128
<div className="border-l">
129129
<div className="flex flex-col">
130130
<div className="p-8 text-center">
131131
<img
132132
src={activeOption.img}
133-
className="w-16 h-16 rounded-full overflow-hidden inline-block mb-4"
133+
className="mb-4 inline-block h-16 w-16 overflow-hidden rounded-full"
134134
/>
135-
<div className="text-gray-900 font-bold">{activeOption.name}</div>
135+
<div className="font-bold text-gray-900">{activeOption.name}</div>
136136
<div className="text-gray-700">Obviously cool person</div>
137137
</div>
138138
</div>

‎packages/playground-react/pages/combobox/command-palette.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,21 @@ export default function Home() {
3333
: everybody.filter((person) => person.name.toLowerCase().includes(query.toLowerCase()))
3434

3535
return (
36-
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
37-
<div className="w-full max-w-lg mx-auto">
36+
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
37+
<div className="mx-auto w-full max-w-lg">
3838
<div className="space-y-1">
3939
<Combobox
4040
as="div"
4141
value={activePerson}
4242
onChange={(person) => setActivePerson(person)}
43-
className="bg-white w-full shadow-sm border border-black/5 bg-clip-padding rounded overflow-hidden"
43+
className="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm"
4444
>
4545
{({ activeOption, open }) => {
4646
return (
47-
<div className="flex flex-col w-full">
47+
<div className="flex w-full flex-col">
4848
<Combobox.Input
4949
onChange={(e) => setQuery(e.target.value)}
50-
className="border-none outline-none px-3 py-1 rounded-none w-full"
50+
className="w-full rounded-none border-none px-3 py-1 outline-none"
5151
placeholder="Search users…"
5252
displayValue={(item: typeof activePerson) => item?.name}
5353
/>
@@ -57,23 +57,23 @@ export default function Home() {
5757
activePerson && !open ? 'border-transparent' : 'border-gray-200'
5858
)}
5959
>
60-
<Combobox.Options className="flex-1 py-1 overflow-auto text-base leading-6 shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
60+
<Combobox.Options className="shadow-xs max-h-60 flex-1 overflow-auto py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
6161
{people.map((person) => (
6262
<Combobox.Option
6363
key={person.id}
6464
value={person}
6565
className={({ active }) => {
6666
return classNames(
67-
'flex relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none space-x-4',
68-
active ? 'text-white bg-indigo-600' : 'text-gray-900'
67+
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
68+
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
6969
)
7070
}}
7171
>
7272
{({ active, selected }) => (
7373
<>
7474
<img
7575
src={person.img}
76-
className="w-6 h-6 overflow-hidden rounded-full"
76+
className="h-6 w-6 overflow-hidden rounded-full"
7777
/>
7878
<span
7979
className={classNames(
@@ -90,7 +90,7 @@ export default function Home() {
9090
active ? 'text-white' : 'text-indigo-600'
9191
)}
9292
>
93-
<svg className="w-5 h-5" viewBox="0 0 25 24" fill="none">
93+
<svg className="h-5 w-5" viewBox="0 0 25 24" fill="none">
9494
<path
9595
d="M11.25 8.75L14.75 12L11.25 15.25"
9696
stroke="currentColor"
@@ -108,16 +108,16 @@ export default function Home() {
108108
</Combobox.Options>
109109

110110
{people.length === 0 ? (
111-
<div className="text-center w-full py-4">No person selected</div>
111+
<div className="w-full py-4 text-center">No person selected</div>
112112
) : activeOption === null ? null : (
113113
<div className="border-l">
114114
<div className="flex flex-col">
115115
<div className="p-8 text-center">
116116
<img
117117
src={activeOption.img}
118-
className="w-16 h-16 rounded-full overflow-hidden inline-block mb-4"
118+
className="mb-4 inline-block h-16 w-16 overflow-hidden rounded-full"
119119
/>
120-
<div className="text-gray-900 font-bold">{activeOption.name}</div>
120+
<div className="font-bold text-gray-900">{activeOption.name}</div>
121121
<div className="text-gray-700">Obviously cool person</div>
122122
</div>
123123
</div>

0 commit comments

Comments
 (0)