Skip to content

Commit 27756c7

Browse files
IgorKowalczykIgorKowalczyk
authored
Merge pull request #527 from squarestack/tw-4
Update Tailwind CSS to v4
2 parents 38cbc3b + ce93d1f commit 27756c7

10 files changed

Lines changed: 302 additions & 557 deletions

File tree

‎app/layout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function RootLayout({ children }) {
5454
return (
5555
<html lang="en">
5656
<body className={GeistSans.className}>
57-
<main className="flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#070706] bg-hero py-2 antialiased duration-200">
57+
<main className="bg-hero flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#070706] py-2 antialiased duration-200">
5858
{children}
5959
<Toaster // prettier
6060
richColors={false}

‎app/page.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@ export default function App() {
88
return (
99
<div className="relative w-full px-6">
1010
<div className="z-20 flex w-full flex-col">
11-
<span className="mx-auto mb-3 rounded-full border border-white/20 bg-white/10 px-9 py-2 font-medium text-white backdrop-blur-sm">From Vision to Reality:</span>
12-
<h1 className="text-center text-5xl font-extrabold leading-tight tracking-tight text-white">Building the future of the Web</h1>
11+
<span className="mx-auto mb-3 rounded-full border border-white/20 bg-white/10 px-6 py-1 font-medium text-white backdrop-blur-xs">From Vision to Reality:</span>
12+
<h1 className="text-center text-5xl leading-tight font-extrabold tracking-tight text-white">Building the future of the Web</h1>
1313
<p className="pt-3 text-center text-2xl text-white/70">
1414
Join the community of developers
1515
<br />
1616
who are building the future of the web.
1717
</p>
18-
<div className="pt-3">
18+
<div className="mt-6">
1919
<Form />
2020
</div>
2121
</div>
2222
<div className="absolute inset-x-0 z-0 flex">
23-
<div className="relative z-0 aspect-1 size-[48%] rounded-full bg-purple-600 opacity-30 blur-[85px] sm:blur-[150px] md:blur-[200px] lg:blur-[250px]" />
24-
<div className="relative z-10 ml-auto aspect-1 size-[40.8%] rounded-full bg-purple-400 opacity-30 blur-[55px] sm:blur-[60px] md:blur-[110px] lg:blur-[160px]" />
23+
<div className="aspect-1 relative z-0 size-[48%] rounded-full bg-purple-600 opacity-30 blur-[85px] sm:blur-[150px] md:blur-[200px] lg:blur-[250px]" />
24+
<div className="aspect-1 relative z-10 ml-auto size-[40.8%] rounded-full bg-purple-400 opacity-30 blur-[55px] sm:blur-[60px] md:blur-[110px] lg:blur-[160px]" />
2525
</div>
2626
</div>
2727
);

‎components/Form.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export function Form() {
6666
<form onSubmit={handleSubmit}>
6767
<label htmlFor="input" className="flex justify-center">
6868
<span className="sr-only">Github Username</span>
69-
<input id="input" type="name" className={`${isInvalid ? "border-red-400 bg-red-400/10 text-red-400 placeholder:!text-red-400" : "border-white/20"} rounded-lg border bg-white/10 px-4 py-2 text-white outline-none duration-200 placeholder:text-white motion-reduce:transition-none`} placeholder="Enter your Github username" onChange={changeText} />
70-
<button className="!focus:bg-white ml-2 flex items-center justify-center rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-white outline-none duration-200 hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none" disabled={loading || isInvalid || !input || input.length < 3} type="submit">
69+
<input id="input" type="name" className={`${isInvalid ? "border-red-400 bg-red-400/10 text-red-400 placeholder:text-red-400!" : "border-white/20"} rounded-lg border bg-white/10 px-4 py-2 text-white outline-hidden duration-200 placeholder:text-white motion-reduce:transition-none`} placeholder="Enter your Github username" onChange={changeText} />
70+
<button className="!focus:bg-white ml-2 flex cursor-pointer items-center justify-center rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-white outline-hidden duration-200 hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none" disabled={loading || isInvalid || !input || input.length < 3} type="submit">
7171
{loading ? (
7272
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="inline-block size-6 animate-spin text-white">
7373
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />

‎eslint.config.mjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import eslintConfig from "@igorkowalczyk/eslint-config";
33
export default [
44
// prettier
55
...eslintConfig.base,
6+
...eslintConfig.node,
67
...eslintConfig.react,
78
...eslintConfig.next,
8-
...eslintConfig.node,
9-
...eslintConfig.tailwindcss,
109
];

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@
4545
"@igorkowalczyk/prettier-config": "3.0.7",
4646
"@next/bundle-analyzer": "15.2.1",
4747
"@tailwindcss/aspect-ratio": "0.4.2",
48-
"autoprefixer": "10.4.20",
48+
"@tailwindcss/postcss": "^4.0.11",
4949
"encoding": "0.1.13",
5050
"eslint": "9.21.0",
5151
"postcss": "8.5.3",
5252
"prettier": "3.5.3",
5353
"prettier-plugin-tailwindcss": "0.6.11",
54-
"tailwindcss": "3.4.17",
54+
"tailwindcss": "4.0.11",
5555
"typescript": "5.8.2"
5656
},
5757
"peerDependencies": {

0 commit comments

Comments
 (0)