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.

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
Merged
Changes from 14 commits
Commits
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
6 changes: 3 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -647,9 +647,9 @@ workflows:
requires:
- install
- docs-verdaccio:
filters:
branches:
only: main
# filters:
Copy link
Member

Choose a reason for hiding this comment

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

revert

Copy link
Member Author

Choose a reason for hiding this comment

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

waiting for it to be approved first 😄

Copy link
Member

Choose a reason for hiding this comment

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

yeah, this is more of a reminder since I always worry I'll forget

# branches:
# only: main
requires:
- install
- deploy:
19 changes: 19 additions & 0 deletions .yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch
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.

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
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
Original file line number Diff line number Diff line change
@@ -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": {
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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">
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 3 additions & 3 deletions examples/rac-spectrum-tailwind/src/style.css
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;
2 changes: 1 addition & 1 deletion examples/rac-tailwind/.postcssrc
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
Original file line number Diff line number Diff line change
@@ -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": {
6 changes: 3 additions & 3 deletions examples/rac-tailwind/src/AnimatedCalendar.tsx
Original file line number Diff line number Diff line change
@@ -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
@@ -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>
@@ -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>
Loading
Loading