Skip to content
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

feat: Update to Tailwind v4 #7669

Merged
merged 18 commits into from
Jan 29, 2025
+1,622 −1,214
Merged

feat: Update to Tailwind v4 #7669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
811e679
initial upgrade
devongovett Jan 24, 2025
a980dd7
Update plugin, homepage, and examples
devongovett Jan 24, 2025
480d9d3
fix jest resolver
devongovett Jan 24, 2025
980ac39
Update tailwind starter
devongovett Jan 24, 2025
c14cba7
Update rac-tailwind example app
devongovett Jan 24, 2025
46eec9e
Update rac-spectrum-tailwind example
devongovett Jan 24, 2025
c312418
enable verdaccio build
devongovett Jan 24, 2025
2ac68bf
update tailwind-variants
devongovett Jan 24, 2025
ffcf78d
patch
devongovett Jan 24, 2025
d3d6cce
update lockfile
devongovett Jan 24, 2025
57bcefe
missing dependency
devongovett Jan 24, 2025
8786738
copy patches when building website
devongovett Jan 24, 2025
54b9def
dedupe lightningcss
devongovett Jan 25, 2025
8674f2f
Update styling page
devongovett Jan 27, 2025
745bb8d
Fix TextField focus state
devongovett Jan 28, 2025
68f804b
revert verdaccio
devongovett Jan 28, 2025
7a42b9c
Merge branch 'main' into tailwind4
devongovett Jan 28, 2025
5a6d131
fix typo
devongovett Jan 28, 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
19 changes: 19 additions & 0 deletions .yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
diff --git a/dist/transformer.d.ts b/dist/transformer.d.ts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how long is this going to be around? will other users need to do the same patch?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

until heroui-inc/tailwind-variants#239 is fixed.

index 508be4d8176486bfbbccd0b8cf297465c8efd15a..afbd775c60f09c8a9c35e30c79f286fddc7c7018 100644
--- a/dist/transformer.d.ts
+++ b/dist/transformer.d.ts
@@ -1,10 +1,10 @@
-import type {Config} from "tailwindcss/types/config";
-import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";
+// import type {Config} from "tailwindcss/types/config";
+// import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";

-export type DefaultScreens = keyof DefaultTheme["screens"];
+export type DefaultScreens = any;

export type WithTV = {
- <C extends Config>(tvConfig: C, config?: TVTransformerConfig): C;
+ <C>(tvConfig: C, config?: TVTransformerConfig): C;
};

export declare const withTV: WithTV;
2 changes: 1 addition & 1 deletion examples/rac-spectrum-tailwind/.postcssrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"plugins": {
"tailwindcss": {}
"@tailwindcss/postcss": {}
}
}
5 changes: 3 additions & 2 deletions examples/rac-spectrum-tailwind/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@
"@react-spectrum/provider": "^3.9.7",
"@spectrum-icons/illustrations": "^3.6.3",
"@spectrum-icons/workflow": "^4.2.12",
"@tailwindcss/postcss": "^4.0.0",
"parcel": "^2.13.0",
"postcss": "^8.2.1",
"react": "^18.2.0",
"react-aria-components": "^1.0.0-alpha.4",
"react-aria-components": "^1.6.0",
"react-dom": "^18.2.0",
"react-stately": "^3.23.0",
"tailwindcss": "^3.3.0",
"tailwindcss": "^4.0.0",
"tailwindcss-animate": "^1.0.5"
},
"devDependencies": {
Expand Down
6 changes: 3 additions & 3 deletions examples/rac-spectrum-tailwind/src/components/GenInputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ export function GenInputField() {
value={value}
onChange={setValue}
aria-label="Prompt"
className="flex-grow h-full p-150"
className="grow h-full p-150"
>
<Input className="w-full h-full text-xl font-semibold text-black dark:bg-black dark:text-white p-50 focus:outline-none" />
<Input className="w-full h-full text-xl font-semibold text-black dark:bg-black dark:text-white p-50 focus:outline-hidden" />
</TextField>
<Button
isDisabled={value === ""}
className="self-end my-auto font-semibold text-white rounded-full disabled:bg-gray-300 disabled:text-gray-500 mx-200 bg-accent-800 p-150 focus-visible:ring focus:outline-none"
className="self-end my-auto font-semibold text-white rounded-full disabled:bg-gray-300 disabled:text-gray-500 mx-200 bg-accent-800 p-150 focus-visible:ring focus:outline-hidden"
>
Generate
</Button>
Expand Down
2 changes: 1 addition & 1 deletion examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export function NavigationBox({ children, src, ...other }: NavigationBoxProps) {
return (
<Link
style={{ backgroundImage: `url("${src}")` }}
className="flex text-center text-white bg-cover m-175 rounded-medium h-2000 w-2000 p-60 focus-visible:ring focus:outline-none"
className="flex text-center text-white bg-cover m-175 rounded-medium h-2000 w-2000 p-60 focus-visible:ring focus:outline-hidden"
{...other}
>
<div
Expand Down
2 changes: 1 addition & 1 deletion examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function SelectBox({ name, icon, description }: SelectBoxProps) {
return (
<Radio
value={name}
className="flex justify-center bg-white border rounded dark:bg-black p-160 m-160 h-2000 w-2000 focus:outline-none focus-visible:ring-half focus-visible:ring-offset-0 selected:bg-accent-100 selected:border-accent-700"
className="flex justify-center bg-white border rounded dark:bg-black p-160 m-160 h-2000 w-2000 focus:outline-hidden focus-visible:ring-half focus-visible:ring-offset-0 selected:bg-accent-100 selected:border-accent-700"
>
{({ isSelected }) => (
<div className="relative flex flex-col items-center justify-center w-full h-full gap-150">
Expand Down
2 changes: 1 addition & 1 deletion examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function SentimentRating({ rating }: { rating: string }) {
return (
<Radio
value={rating}
className="flex items-center justify-center bg-white border rounded-full disabled:bg-gray-200 disabled:text-gray-400 p-160 m-75 h-200 w-200 focus:outline-none focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
className="flex items-center justify-center bg-white border rounded-full disabled:bg-gray-200 disabled:text-gray-400 p-160 m-75 h-200 w-200 focus:outline-hidden focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
>
{rating}
</Radio>
Expand Down
6 changes: 3 additions & 3 deletions examples/rac-spectrum-tailwind/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss' source("./");

@config '../tailwind.config.js';

* {
-webkit-tap-highlight-color: transparent;
Expand Down
2 changes: 1 addition & 1 deletion examples/rac-tailwind/.postcssrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"plugins": {
"tailwindcss": {}
"@tailwindcss/postcss": {}
}
}
5 changes: 3 additions & 2 deletions examples/rac-tailwind/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@
"dependencies": {
"@heroicons/react": "^2.0.16",
"@react-aria/parcel-resolver-optimize-locales": "^1.0.0",
"@tailwindcss/postcss": "^4.0.0",
"framer-motion": "^10.12.16",
"parcel": "^2.13.0",
"postcss": "^8.4.21",
"react": "^18.2.0",
"react-aria-components": "^1.0.0-alpha.4",
"react-aria-components": "^1.6.0",
"react-dom": "^18.2.0",
"react-stately": "^3.23.0",
"tailwindcss": "^3.3.0",
"tailwindcss": "^4.0.0",
"tailwindcss-animate": "^1.0.5"
},
"devDependencies": {
Expand Down
6 changes: 3 additions & 3 deletions examples/rac-tailwind/src/AnimatedCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function AnimatedCalendar() {
state.focusPreviousPage();
setPageOffset(pageOffset - 1);
}}
className="w-12 h-12 sm:w-9 sm:h-9 ml-4 outline-none cursor-default rounded-full flex items-center justify-center data-[hovered]:bg-gray-100 data-[pressed]:bg-gray-200 data-[focus-visible]:ring data-[focus-visible]:ring-black data-[focus-visible]:ring-offset-2">
className="w-12 h-12 sm:w-9 sm:h-9 ml-4 outline-hidden cursor-default rounded-full flex items-center justify-center data-hovered:bg-gray-100 data-pressed:bg-gray-200 data-focus-visible:ring-3 data-focus-visible:ring-black data-focus-visible:ring-offset-2">
<ChevronLeftIcon className="h-6 w-6" />
</Button>
<Button
Expand All @@ -43,7 +43,7 @@ export function AnimatedCalendar() {
state.focusNextPage();
setPageOffset(pageOffset + 1);
}}
className="w-12 h-12 sm:w-9 sm:h-9 outline-none cursor-default rounded-full flex items-center justify-center data-[hovered]:bg-gray-100 data-[pressed]:bg-gray-200 data-[focus-visible]:ring data-[focus-visible]:ring-black data-[focus-visible]:ring-offset-2">
className="w-12 h-12 sm:w-9 sm:h-9 outline-hidden cursor-default rounded-full flex items-center justify-center data-hovered:bg-gray-100 data-pressed:bg-gray-200 data-focus-visible:ring-3 data-focus-visible:ring-black data-focus-visible:ring-offset-2">
<ChevronRightIcon className="h-6 w-6" />
</Button>
</header>
Expand Down Expand Up @@ -81,7 +81,7 @@ function Month({offset}: { offset: number }) {
{(date) => (
<CalendarCell
date={date}
className="w-12 h-12 sm:w-9 sm:h-9 outline-none cursor-default rounded-full text-md sm:text-sm flex items-center justify-center data-[outside-month]:text-gray-300 data-[hovered]:bg-gray-100 data-[pressed]:bg-gray-200 data-[selected]:data-[hovered]:bg-black data-[selected]:bg-black data-[selected]:text-white data-[focus-visible]:ring data-[focus-visible]:ring-black data-[focus-visible]:ring-offset-2" />
className="w-12 h-12 sm:w-9 sm:h-9 outline-hidden cursor-default rounded-full text-md sm:text-sm flex items-center justify-center data-outside-month:text-gray-300 data-hovered:bg-gray-100 data-pressed:bg-gray-200 data-selected:data-hovered:bg-black data-selected:bg-black data-selected:text-white data-focus-visible:ring-3 data-focus-visible:ring-black data-focus-visible:ring-offset-2" />
)}
</CalendarGridBody>
</CalendarGrid>
Expand Down
Loading