Skip to content

Migrate React playground to Tailwind CSS v4 #3695

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

Merged
RobinMalfait merged 9 commits into from
Apr 11, 2025
Merged

Migrate React playground to Tailwind CSS v4 #3695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a5af731
prepare for Tailwind CSS v4 upgrade
RobinMalfait Apr 11, 2025
c15a627
migrate to Tailwind CSS v4
RobinMalfait Apr 11, 2025
01fbc72
run prettier
RobinMalfait Apr 11, 2025
3b0bd58
use v4.1.3 in `@headlessui/tailwindcss` as a dev dependency
RobinMalfait Apr 11, 2025
4451674
point Prettier to Tailwind CSS stylesheet
RobinMalfait Apr 11, 2025
48a313e
bump to latest `prettier-plugin-tailwindcss`
RobinMalfait Apr 11, 2025
48ea469
run prettier
RobinMalfait Apr 11, 2025
b50afe3
Revert "use v4.1.3 in `@headlessui/tailwindcss` as a dev dependency"
RobinMalfait Apr 11, 2025
97ca048
make CI happy?
RobinMalfait Apr 11, 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
631 changes: 558 additions & 73 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 19 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,24 @@
"plugins": [
"prettier-plugin-organize-imports",
"prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": [
"./playgrounds/react/**/*"
],
"options": {
"tailwindStylesheet": "./playgrounds/react/pages/styles.css"
}
},
{
"files": [
"./playgrounds/vue/**/*"
],
"options": {
"tailwindStylesheet": "./playgrounds/vue/src/styles.css"
}
}
]
},
"devDependencies": {
Expand All @@ -60,7 +78,7 @@
"npm-run-all": "^4.1.5",
"prettier": "^3.1.0",
"prettier-plugin-organize-imports": "^3.2.4",
"prettier-plugin-tailwindcss": "^0.5.7",
"prettier-plugin-tailwindcss": "^0.6.11",
"resize-observer-polyfill": "^1.5.1",
"rimraf": "^3.0.2",
"tslib": "^2.3.1",
Expand Down
2 changes: 1 addition & 1 deletion playgrounds/react/components/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export let Button = forwardRef<
ref={ref}
type="button"
className={classNames(
'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',
'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',
className
)}
{...props}
Expand Down
4 changes: 2 additions & 2 deletions playgrounds/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@
"@heroicons/react": "^1.0.6",
"@popperjs/core": "^2.6.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/postcss": "^4.1.3",
"@tailwindcss/typography": "^0.5.2",
"autoprefixer": "^10.4.7",
"framer-motion": "^6.0.0",
"next": "^14.0.4",
"postcss": "^8.4.14",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flatpickr": "^3.10.9",
"react-hot-toast": "2.3.0",
"tailwindcss": "^3.3.3"
"tailwindcss": "^4.1.3"
},
"devDependencies": {
"@floating-ui/react": "^0.24.8"
Expand Down
6 changes: 3 additions & 3 deletions playgrounds/react/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Link from 'next/link'
import { useEffect, useState } from 'react'

import { useRouter } from 'next/router'
import 'tailwindcss/tailwind.css'
import './styles.css'

function disposables() {
let disposables: Function[] = []
Expand Down Expand Up @@ -122,7 +122,7 @@ function KeyCaster() {
if (keys.length <= 0) return null

return (
<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">
<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">
{keys.slice().reverse().join(' ')}
</div>
)
Expand All @@ -137,7 +137,7 @@ function MyApp({ Component, pageProps }) {
return (
<>
<div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
<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">
<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">
<Link href="/">
<Logo className="h-6" />
</Link>
Expand Down
22 changes: 11 additions & 11 deletions playgrounds/react/pages/combinations/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function App() {
name="notifications"
className={({ checked }) =>
classNames(
'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',
'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',
checked ? 'bg-blue-600' : 'bg-gray-200'
)
}
Expand All @@ -72,7 +72,7 @@ export default function App() {
value="apple"
className={({ checked }) =>
classNames(
'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',
'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',
checked ? 'bg-blue-600' : 'bg-gray-200'
)
}
Expand All @@ -95,7 +95,7 @@ export default function App() {
value="banana"
className={({ checked }) =>
classNames(
'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',
'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',
checked ? 'bg-blue-600' : 'bg-gray-200'
)
}
Expand All @@ -122,7 +122,7 @@ export default function App() {
value={size}
className={({ active }) =>
classNames(
'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',
'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',
active ? 'z-10 border-blue-200 bg-blue-50' : 'border-gray-200'
)
}
Expand Down Expand Up @@ -191,14 +191,14 @@ export default function App() {
</Listbox.Button>

<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
<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">
<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">
{people.map((person) => (
<Listbox.Option
key={person.id}
value={person}
className={({ active }) => {
return classNames(
'relative cursor-default select-none py-2 pl-3 pr-9 ',
'relative cursor-default select-none py-2 pl-3 pr-9',
active ? 'bg-blue-600 text-white' : 'text-gray-900'
)
}}
Expand Down Expand Up @@ -260,7 +260,7 @@ export default function App() {
<div className="flex w-full flex-col">
<Combobox.Input
onChange={(e) => setQuery(e.target.value)}
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"
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"
placeholder="Search users..."
/>
<div
Expand All @@ -270,7 +270,7 @@ export default function App() {
)}
>
<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
<Combobox.Options className="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
{locations
.filter((location) =>
location.toLowerCase().includes(query.toLowerCase())
Expand All @@ -281,7 +281,7 @@ export default function App() {
value={location}
className={({ active }) => {
return classNames(
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 ',
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
active ? 'bg-blue-600 text-white' : 'text-gray-900'
)
}}
Expand Down Expand Up @@ -335,13 +335,13 @@ export default function App() {
</div>

<div className="space-x-4">
<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">
<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">
Submit
</button>

<button
type="reset"
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"
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"
>
Reset
</button>
Expand Down
8 changes: 4 additions & 4 deletions playgrounds/react/pages/combobox/combobox-countries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ export default function Home() {
</Combobox.Label>

<div className="relative">
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
<Combobox.Input
onChange={(e) => setQuery(e.target.value)}
className="border-none px-3 py-1 outline-none"
className="outline-hidden border-none px-3 py-1"
/>
<Combobox.Button as={Button}>
<span className="pointer-events-none flex items-center px-2">
Expand All @@ -75,15 +75,15 @@ export default function Home() {
<Combobox.Options
transition
anchor="bottom start"
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"
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"
>
{countries.map((country) => (
<Combobox.Option
key={country}
value={country}
className={({ active }) => {
return classNames(
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
Expand Down
8 changes: 4 additions & 4 deletions playgrounds/react/pages/combobox/combobox-open-on-focus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ export default function Home() {
</Combobox.Label>

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

<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
<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">
<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">
{people.map((name) => (
<Combobox.Option
key={name}
value={name}
className={({ active }) => {
return classNames(
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
Expand Down
12 changes: 6 additions & 6 deletions playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@ export default function Home() {
</Combobox.Label>

<div className="relative">
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
<Combobox.Input
onChange={(e) => setQuery(e.target.value)}
displayValue={(option: Option | null) => option?.name ?? ''}
className="border-none px-3 py-1 outline-none"
className="outline-hidden border-none px-3 py-1"
/>
<Combobox.Button as={Button}>
<span className="pointer-events-none flex items-center px-2">
Expand Down Expand Up @@ -116,7 +116,7 @@ export default function Home() {
static={filtered.length === 0}
ref={optionsRef}
className={classNames(
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
'shadow-2xs focus:outline-hidden max-h-60 rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5',
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
)}
>
Expand All @@ -130,7 +130,7 @@ export default function Home() {
disabled
// Note: Do NOT use `null` for the `value`
value={option ?? emptyOption.current}
className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
className="focus:outline-hidden relative w-full cursor-default select-none px-3 py-2 text-center"
>
<div className="relative grid h-full grid-cols-1 grid-rows-1">
<div className="absolute inset-0">
Expand All @@ -155,7 +155,7 @@ export default function Home() {
<button
id="add_person"
type="button"
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"
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"
onClick={() => {
let person = { name: query, disabled: false }
setList((list) => [...list, person])
Expand All @@ -177,7 +177,7 @@ export default function Home() {
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
Expand Down
Loading