Skip to content

Commit e10f54b

Browse files
RobinMalfaitRobinMalfait
authored
Migrate React playground to Tailwind CSS v4 (#3695)
This PR bumps the internal React playground to use Tailwind CSS v4
1 parent dc30c09 commit e10f54b

File tree

82 files changed

+915
-392
lines changed

Some content is hidden

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

82 files changed

+915
-392
lines changed

‎package-lock.json‎

Lines changed: 558 additions & 73 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,24 @@
4343
"plugins": [
4444
"prettier-plugin-organize-imports",
4545
"prettier-plugin-tailwindcss"
46+
],
47+
"overrides": [
48+
{
49+
"files": [
50+
"./playgrounds/react/**/*"
51+
],
52+
"options": {
53+
"tailwindStylesheet": "./playgrounds/react/pages/styles.css"
54+
}
55+
},
56+
{
57+
"files": [
58+
"./playgrounds/vue/**/*"
59+
],
60+
"options": {
61+
"tailwindStylesheet": "./playgrounds/vue/src/styles.css"
62+
}
63+
}
4664
]
4765
},
4866
"devDependencies": {
@@ -60,7 +78,7 @@
6078
"npm-run-all": "^4.1.5",
6179
"prettier": "^3.1.0",
6280
"prettier-plugin-organize-imports": "^3.2.4",
63-
"prettier-plugin-tailwindcss": "^0.5.7",
81+
"prettier-plugin-tailwindcss": "^0.6.11",
6482
"resize-observer-polyfill": "^1.5.1",
6583
"rimraf": "^3.0.2",
6684
"tslib": "^2.3.1",

‎playgrounds/react/components/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export let Button = forwardRef<
1212
ref={ref}
1313
type="button"
1414
className={classNames(
15-
'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none',
15+
'focus:outline-hidden ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100',
1616
className
1717
)}
1818
{...props}

‎playgrounds/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@
2020
"@heroicons/react": "^1.0.6",
2121
"@popperjs/core": "^2.6.0",
2222
"@tailwindcss/forms": "^0.5.2",
23+
"@tailwindcss/postcss": "^4.1.3",
2324
"@tailwindcss/typography": "^0.5.2",
24-
"autoprefixer": "^10.4.7",
2525
"framer-motion": "^6.0.0",
2626
"next": "^14.0.4",
2727
"postcss": "^8.4.14",
2828
"react": "^18.2.0",
2929
"react-dom": "^18.2.0",
3030
"react-flatpickr": "^3.10.9",
3131
"react-hot-toast": "2.3.0",
32-
"tailwindcss": "^3.3.3"
32+
"tailwindcss": "^4.1.3"
3333
},
3434
"devDependencies": {
3535
"@floating-ui/react": "^0.24.8"

‎playgrounds/react/pages/_app.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Link from 'next/link'
22
import { useEffect, useState } from 'react'
33

44
import { useRouter } from 'next/router'
5-
import 'tailwindcss/tailwind.css'
5+
import './styles.css'
66

77
function disposables() {
88
let disposables: Function[] = []
@@ -122,7 +122,7 @@ function KeyCaster() {
122122
if (keys.length <= 0) return null
123123

124124
return (
125-
<div className="pointer-events-none fixed bottom-4 right-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">
125+
<div className="pointer-events-none fixed bottom-4 right-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-sm">
126126
{keys.slice().reverse().join(' ')}
127127
</div>
128128
)
@@ -137,7 +137,7 @@ function MyApp({ Component, pageProps }) {
137137
return (
138138
<>
139139
<div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
140-
<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">
140+
<header className="relative z-10 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">
141141
<Link href="/">
142142
<Logo className="h-6" />
143143
</Link>

‎playgrounds/react/pages/combinations/form.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function App() {
4646
name="notifications"
4747
className={({ checked }) =>
4848
classNames(
49-
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
49+
'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
5050
checked ? 'bg-blue-600' : 'bg-gray-200'
5151
)
5252
}
@@ -72,7 +72,7 @@ export default function App() {
7272
value="apple"
7373
className={({ checked }) =>
7474
classNames(
75-
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
75+
'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
7676
checked ? 'bg-blue-600' : 'bg-gray-200'
7777
)
7878
}
@@ -95,7 +95,7 @@ export default function App() {
9595
value="banana"
9696
className={({ checked }) =>
9797
classNames(
98-
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
98+
'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
9999
checked ? 'bg-blue-600' : 'bg-gray-200'
100100
)
101101
}
@@ -122,7 +122,7 @@ export default function App() {
122122
value={size}
123123
className={({ active }) =>
124124
classNames(
125-
'relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
125+
'focus:outline-hidden relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
126126
active ? 'z-10 border-blue-200 bg-blue-50' : 'border-gray-200'
127127
)
128128
}
@@ -191,14 +191,14 @@ export default function App() {
191191
</Listbox.Button>
192192

193193
<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
194-
<Listbox.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">
194+
<Listbox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
195195
{people.map((person) => (
196196
<Listbox.Option
197197
key={person.id}
198198
value={person}
199199
className={({ active }) => {
200200
return classNames(
201-
'relative cursor-default select-none py-2 pl-3 pr-9 ',
201+
'relative cursor-default select-none py-2 pl-3 pr-9',
202202
active ? 'bg-blue-600 text-white' : 'text-gray-900'
203203
)
204204
}}
@@ -260,7 +260,7 @@ export default function App() {
260260
<div className="flex w-full flex-col">
261261
<Combobox.Input
262262
onChange={(e) => setQuery(e.target.value)}
263-
className="w-full rounded rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
263+
className="shadow-xs focus:outline-hidden w-full rounded-md rounded-sm border-gray-300 bg-clip-padding px-3 py-1 focus:border-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
264264
placeholder="Search users..."
265265
/>
266266
<div
@@ -270,7 +270,7 @@ export default function App() {
270270
)}
271271
>
272272
<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
273-
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
273+
<Combobox.Options className="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
274274
{locations
275275
.filter((location) =>
276276
location.toLowerCase().includes(query.toLowerCase())
@@ -281,7 +281,7 @@ export default function App() {
281281
value={location}
282282
className={({ active }) => {
283283
return classNames(
284-
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 ',
284+
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
285285
active ? 'bg-blue-600 text-white' : 'text-gray-900'
286286
)
287287
}}
@@ -335,13 +335,13 @@ export default function App() {
335335
</div>
336336

337337
<div className="space-x-4">
338-
<button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
338+
<button className="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
339339
Submit
340340
</button>
341341

342342
<button
343343
type="reset"
344-
className="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
344+
className="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
345345
>
346346
Reset
347347
</button>

‎playgrounds/react/pages/combobox/combobox-countries.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ export default function Home() {
4848
</Combobox.Label>
4949

5050
<div className="relative">
51-
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
51+
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
5252
<Combobox.Input
5353
onChange={(e) => setQuery(e.target.value)}
54-
className="border-none px-3 py-1 outline-none"
54+
className="outline-hidden border-none px-3 py-1"
5555
/>
5656
<Combobox.Button as={Button}>
5757
<span className="pointer-events-none flex items-center px-2">
@@ -75,15 +75,15 @@ export default function Home() {
7575
<Combobox.Options
7676
transition
7777
anchor="bottom start"
78-
className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-1000 [--anchor-gap:theme(spacing.1)] [--anchor-max-height:theme(spacing.60)] focus:outline-none data-[closed]:opacity-0 sm:text-sm sm:leading-5"
78+
className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-1000 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
7979
>
8080
{countries.map((country) => (
8181
<Combobox.Option
8282
key={country}
8383
value={country}
8484
className={({ active }) => {
8585
return classNames(
86-
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
86+
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
8787
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
8888
)
8989
}}

‎playgrounds/react/pages/combobox/combobox-open-on-focus.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ export default function Home() {
6262
</Combobox.Label>
6363

6464
<div className="relative">
65-
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
65+
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
6666
<Combobox.Input
6767
onChange={(e) => setQuery(e.target.value)}
68-
className="border-none px-3 py-1 outline-none"
68+
className="outline-hidden border-none px-3 py-1"
6969
/>
7070
<Combobox.Button as={Button}>
7171
<span className="pointer-events-none flex items-center px-2">
@@ -87,14 +87,14 @@ export default function Home() {
8787
</span>
8888

8989
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
90-
<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">
90+
<Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
9191
{people.map((name) => (
9292
<Combobox.Option
9393
key={name}
9494
value={name}
9595
className={({ active }) => {
9696
return classNames(
97-
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
97+
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
9898
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
9999
)
100100
}}

‎playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ export default function Home() {
8383
</Combobox.Label>
8484

8585
<div className="relative">
86-
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
86+
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
8787
<Combobox.Input
8888
onChange={(e) => setQuery(e.target.value)}
8989
displayValue={(option: Option | null) => option?.name ?? ''}
90-
className="border-none px-3 py-1 outline-none"
90+
className="outline-hidden border-none px-3 py-1"
9191
/>
9292
<Combobox.Button as={Button}>
9393
<span className="pointer-events-none flex items-center px-2">
@@ -116,7 +116,7 @@ export default function Home() {
116116
static={filtered.length === 0}
117117
ref={optionsRef}
118118
className={classNames(
119-
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
119+
'shadow-2xs focus:outline-hidden max-h-60 rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5',
120120
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
121121
)}
122122
>
@@ -130,7 +130,7 @@ export default function Home() {
130130
disabled
131131
// Note: Do NOT use `null` for the `value`
132132
value={option ?? emptyOption.current}
133-
className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
133+
className="focus:outline-hidden relative w-full cursor-default select-none px-3 py-2 text-center"
134134
>
135135
<div className="relative grid h-full grid-cols-1 grid-rows-1">
136136
<div className="absolute inset-0">
@@ -155,7 +155,7 @@ export default function Home() {
155155
<button
156156
id="add_person"
157157
type="button"
158-
className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
158+
className="focus:outline-hidden rounded-sm bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
159159
onClick={() => {
160160
let person = { name: query, disabled: false }
161161
setList((list) => [...list, person])
@@ -177,7 +177,7 @@ export default function Home() {
177177
value={option}
178178
className={({ active }) => {
179179
return classNames(
180-
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
180+
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
181181
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
182182
)
183183
}}

0 commit comments

Comments
 (0)