Skip to content

Commit

Permalink
chore(deps): update dependency tailwindcss to v4 (#2120)
Browse files Browse the repository at this point in the history 
Co-authored-by: Vicary A <[email protected]>
  • Loading branch information
@renovate @vicary
renovate[bot] and vicary authored Feb 7, 2025
1 parent 8be359f commit 3ab76ef
Show file tree
Hide file tree
Showing 13 changed files with 399 additions and 381 deletions.
17 changes: 13 additions & 4 deletions examples/gnt/app/components/CscCharactersSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,24 @@ const SearchBox: FunctionComponent<{
const [inputName, setInputName] = useState('');

return (
<div className="flex gap-3">
<form
className="flex gap-3 items-center mb-3"
onSubmit={(e) => {
e.preventDefault();
onChange?.(inputName);
}}
>
<input
autoFocus
type="text"
defaultValue={inputName}
onChange={(e) => setInputName(e.target.value)}
className="border border-gray-300 rounded-md px-3 py-2 w-full text-black"
className="border border-gray-300 rounded-md px-3 py-2 w-full text-black bg-white"
/>
<Button onClick={() => onChange?.(inputName)}>Search</Button>
</div>
<Button type="submit" size="lg">
Search
</Button>
</form>
);
};

Expand Down
32 changes: 29 additions & 3 deletions examples/gnt/app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,32 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@plugin '@tailwindcss/typography';

@theme {
--background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
--background-image-gradient-conic: conic-gradient(
from 180deg at 50% 50%,
var(--tw-gradient-stops)
);
}

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

:root {
--foreground-rgb: 0, 0, 0;
Expand Down
80 changes: 40 additions & 40 deletions examples/gnt/components/tailwindui/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,58 +21,58 @@ export const Button: FunctionComponent<Props> = ({
disabled={disabled}
className={`${className}
cursor-pointer inline-flex items-center border font-medium shadow-sm
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
${
accent === 'primary'
? `border-transparent bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-500 text-white`
: accent === 'secondary'
? `border-transparent bg-indigo-100 hover:bg-indigo-200 active:bg-indigo-50 text-indigo-700`
: accent === 'white'
? `border-gray-300 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700`
: ``
? `border-transparent bg-indigo-100 hover:bg-indigo-200 active:bg-indigo-50 text-indigo-700`
: accent === 'white'
? `border-gray-300 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700`
: ``
}
${
size === 'xs'
? `${
rounded === undefined
? `rounded px-2.5 py-1.5`
? `rounded-sm px-2.5 py-1.5`
: rounded
? `rounded-full p-1`
: `px-2.5 py-1.5`
? `rounded-full p-1`
: `px-2.5 py-1.5`
} text-xs`
: size === 'sm'
? `${
rounded === undefined
? `rounded-md px-3 py-2`
: rounded
? `rounded-full p-1.5`
: `px-3 py-2`
} text-sm leading-4`
: size === 'md'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-sm`
: size === 'lg'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-base`
: size === 'xl'
? `${
rounded === undefined
? `rounded-md px-6 py-3`
: rounded
? `rounded-full p-3`
: `px-6 py-3`
} text-base`
: ``
? `${
rounded === undefined
? `rounded-md px-3 py-2`
: rounded
? `rounded-full p-1.5`
: `px-3 py-2`
} text-sm leading-4`
: size === 'md'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-sm`
: size === 'lg'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-base`
: size === 'xl'
? `${
rounded === undefined
? `rounded-md px-6 py-3`
: rounded
? `rounded-full p-3`
: `px-6 py-3`
} text-base`
: ``
}`}
{...props}
/>
Expand Down
4 changes: 2 additions & 2 deletions examples/gnt/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@
"devDependencies": {
"@gqty/cli": "workspace:^",
"@next/bundle-analyzer": "^14.2.23",
"@tailwindcss/postcss": "^4.0.0",
"@tailwindcss/typography": "^0.5.16",
"@types/node": "22.13.1",
"@types/react": "18.3.18",
"@types/react-dom": "18.3.5",
"autoprefixer": "^10.4.20",
"dotenv-cli": "^8.0.0",
"eslint": "^9.19.0",
"eslint-config-next": "^14.2.23",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.0.4",
"typescript": "^5.7.3"
},
"gqty": {
Expand Down
7 changes: 1 addition & 6 deletions examples/gnt/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
module.exports = { plugins: { '@tailwindcss/postcss': {} } };
18 changes: 0 additions & 18 deletions examples/gnt/tailwind.config.js
View file

This file was deleted.

4 changes: 2 additions & 2 deletions examples/solid/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
"solid-js": "^1.9.4"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.0",
"@tailwindcss/typography": "^0.5.16",
"autoprefixer": "^10.4.20",
"graphql": "^16.10.0",
"postcss": "^8.5.1",
"solid-devtools": "^0.33.0",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.0.4",
"typescript": "^5.7.3",
"vite": "^6.0.11",
"vite-plugin-solid": "^2.11.1"
Expand Down
7 changes: 1 addition & 6 deletions examples/solid/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
export default { plugins: { '@tailwindcss/postcss': {} } };
2 changes: 1 addition & 1 deletion examples/solid/src/components/Characters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const SearchBox: Component<{
type="text"
value={inputName()}
onChange={(e) => setInputName(e.target.value)}
class="border border-gray-300 rounded-md px-3 py-2 w-full text-black"
class="border border-gray-300 rounded-md px-3 py-2 w-full text-black bg-white"
/>
<Button type="submit" size="lg">
Search
Expand Down
82 changes: 41 additions & 41 deletions examples/solid/src/components/tailwindui/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,59 +23,59 @@ export const Button: Component<Props> = ({
type="button"
disabled={disabled}
class={`${classProp}
cursor-pointer inline-flex items-center border font-medium shadow-sm
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
cursor-pointer inline-flex items-center border font-medium shadow-xs
focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
${
accent === 'primary'
? `border-transparent bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-500 text-white`
: accent === 'secondary'
? `border-transparent bg-indigo-100 hover:bg-indigo-200 active:bg-indigo-50 text-indigo-700`
: accent === 'white'
? `border-gray-300 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700`
: ``
? `border-transparent bg-indigo-100 hover:bg-indigo-200 active:bg-indigo-50 text-indigo-700`
: accent === 'white'
? `border-gray-300 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700`
: ``
}
${
size === 'xs'
? `${
rounded === undefined
? `rounded px-2.5 py-1.5`
? `rounded-sm px-2.5 py-1.5`
: rounded
? `rounded-full p-1`
: `px-2.5 py-1.5`
? `rounded-full p-1`
: `px-2.5 py-1.5`
} text-xs`
: size === 'sm'
? `${
rounded === undefined
? `rounded-md px-3 py-2`
: rounded
? `rounded-full p-1.5`
: `px-3 py-2`
} text-sm leading-4`
: size === 'md'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-sm`
: size === 'lg'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-base`
: size === 'xl'
? `${
rounded === undefined
? `rounded-md px-6 py-3`
: rounded
? `rounded-full p-3`
: `px-6 py-3`
} text-base`
: ``
? `${
rounded === undefined
? `rounded-md px-3 py-2`
: rounded
? `rounded-full p-1.5`
: `px-3 py-2`
} text-sm leading-4`
: size === 'md'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-sm`
: size === 'lg'
? `${
rounded === undefined
? `rounded-md px-4 py-2`
: rounded
? `rounded-full p-2`
: `px-4 py-2`
} text-base`
: size === 'xl'
? `${
rounded === undefined
? `rounded-md px-6 py-3`
: rounded
? `rounded-full p-3`
: `px-6 py-3`
} text-base`
: ``
}`}
{...props}
/>
Expand Down
6 changes: 3 additions & 3 deletions examples/solid/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@plugin '@tailwindcss/typography';

body {
@apply bg-slate-600 text-white;
Expand Down
8 changes: 0 additions & 8 deletions examples/solid/tailwind.config.js
View file

This file was deleted.

Loading

0 comments on commit 3ab76ef

Please sign in to comment.