Skip to content

Commit

Permalink
5.0.0 - Upgrade to Tailwind 4
Browse files Browse the repository at this point in the history
  • Loading branch information
pasqualevitiello committed Feb 3, 2025
1 parent b6634e5 commit 9c0a864
Show file tree
Hide file tree
Showing 20 changed files with 1,300 additions and 2,948 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# CHANGELOG.md

## [5.0.0] - 2025-02-04

- Updgrade to Tailwind v4
- Update dependencies

## [4.1.0] - 2024-12-08

- Update dependencies + Upgrade to Next.js 15
Expand Down
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

**Open** is a **free React / Next.js landing page template built with Tailwind CSS** for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.

**UPDATE 2025-02-04** Added Tailwind v4 support!

Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it.

Created and maintained with ❤️ by [Cruip.com](https://cruip.com).
Expand Down Expand Up @@ -35,9 +37,9 @@ First, run the development server:
```bash
npm run dev
# or
yarn dev
pnpm dev (recommended)
# or
pnpm dev
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
Expand Down
4 changes: 2 additions & 2 deletions app/(auth)/reset-password/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function ResetPassword() {
<div className="py-12 md:py-20">
{/* Section header */}
<div className="pb-12 text-center">
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,var(--color-gray-200),var(--color-indigo-200),var(--color-gray-50),var(--color-indigo-300),var(--color-gray-200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
Reset your password
</h1>
</div>
Expand All @@ -33,7 +33,7 @@ export default function ResetPassword() {
/>
</div>
<div className="mt-6">
<button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_--theme(--color-white/.16)] hover:bg-[length:100%_150%]">
Reset Password
</button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/(auth)/signin/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function SignIn() {
<div className="py-12 md:py-20">
{/* Section header */}
<div className="pb-12 text-center">
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,var(--color-gray-200),var(--color-indigo-200),var(--color-gray-50),var(--color-indigo-300),var(--color-gray-200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
Welcome back
</h1>
</div>
Expand Down Expand Up @@ -57,13 +57,13 @@ export default function SignIn() {
</div>
</div>
<div className="mt-6 space-y-5">
<button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_--theme(--color-white/.16)] hover:bg-[length:100%_150%]">
Sign in
</button>
<div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-gradient-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-gradient-to-r after:from-transparent after:via-gray-400/25">
<div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-linear-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-linear-to-r after:from-transparent after:via-gray-400/25">
or
</div>
<button className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
<button className="btn relative w-full bg-linear-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
Sign In with Google
</button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/(auth)/signup/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function SignUp() {
<div className="py-12 md:py-20">
{/* Section header */}
<div className="pb-12 text-center">
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,var(--color-gray-200),var(--color-indigo-200),var(--color-gray-50),var(--color-indigo-300),var(--color-gray-200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
Create an account
</h1>
</div>
Expand Down Expand Up @@ -79,13 +79,13 @@ export default function SignUp() {
</div>
</div>
<div className="mt-6 space-y-5">
<button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_--theme(--color-white/.16)] hover:bg-[length:100%_150%]">
Register
</button>
<div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-gradient-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-gradient-to-r after:from-transparent after:via-gray-400/25">
<div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-linear-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-linear-to-r after:from-transparent after:via-gray-400/25">
or
</div>
<button className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
<button className="btn relative w-full bg-linear-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
Sign In with Google
</button>
</div>
Expand Down
31 changes: 0 additions & 31 deletions app/css/additional-styles/custom-fonts.css

This file was deleted.

28 changes: 14 additions & 14 deletions app/css/additional-styles/utility-patterns.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
/* Buttons */
.btn,
.btn-sm {
@apply inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all;
@apply inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all;
}

.btn {
@apply px-4 py-[11px];
@apply px-4 py-[11px];
}

.btn-sm {
@apply px-3 py-[7px];
@apply px-3 py-[7px];
}

/* Forms */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
-webkit-appearance: none;
}

.form-input,
Expand All @@ -26,30 +26,30 @@ input[type="search"]::-webkit-search-results-decoration {
.form-select,
.form-checkbox,
.form-radio {
@apply border border-gray-700 bg-gray-900/50 focus:border-gray-600 focus:ring-0 focus:ring-offset-0;
@apply border border-gray-700 bg-gray-900/50 focus:border-gray-600 focus:ring-0 focus:ring-offset-0;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
@apply rounded-lg px-4 py-2.5 text-sm text-gray-200;
@apply rounded-lg px-4 py-2.5 text-sm text-gray-200;
}

.form-input,
.form-textarea {
@apply placeholder-gray-600;
@apply placeholder-gray-600;
}

.form-select {
@apply pr-10;
@apply pr-10;
}

.form-checkbox,
.form-radio {
@apply text-indigo-500;
@apply text-indigo-500;
}

.form-checkbox {
@apply rounded;
@apply rounded-xs;
}
95 changes: 90 additions & 5 deletions app/css/style.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,92 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import 'tailwindcss';

/* Additional styles */
@import "additional-styles/utility-patterns.css";
@import "additional-styles/theme.css";
@import "tailwindcss/utilities";
@import './additional-styles/utility-patterns.css' layer(components);
@import './additional-styles/theme.css';

@plugin "@tailwindcss/forms" {
strategy: base;
}

@theme {
--font-inter: var(--font-inter), sans-serif;
--font-nacelle: var(--font-nacelle), sans-serif;

--text-xs: 0.8125rem;
--text-xs--line-height: 1.5384;
--text-sm: 0.875rem;
--text-sm--line-height: 1.5715;
--text-base: 0.9375rem;
--text-base--line-height: 1.5333;
--text-base--letter-spacing: -0.0125em;
--text-lg: 1.125rem;
--text-lg--line-height: 1.5;
--text-lg--letter-spacing: -0.0125em;
--text-xl: 1.25rem;
--text-xl--line-height: 1.5;
--text-xl--letter-spacing: -0.0125em;
--text-2xl: 1.5rem;
--text-2xl--line-height: 1.415;
--text-2xl--letter-spacing: -0.0268em;
--text-3xl: 1.75rem;
--text-3xl--line-height: 1.3571;
--text-3xl--letter-spacing: -0.0268em;
--text-4xl: 2.5rem;
--text-4xl--line-height: 1.1;
--text-4xl--letter-spacing: -0.0268em;
--text-5xl: 3.5rem;
--text-5xl--line-height: 1;
--text-5xl--letter-spacing: -0.0268em;
--text-6xl: 4rem;
--text-6xl--line-height: 1;
--text-6xl--letter-spacing: -0.0268em;
--text-7xl: 4.5rem;
--text-7xl--line-height: 1;
--text-7xl--letter-spacing: -0.0268em;

--animate-shine: shine 5s ease-in-out 500ms infinite;

@keyframes shine {
0% {
top: 0;
transform: scaleY(5);
opacity: 0;
}
10% {
opacity: 0.8;
}
20% {
top: 100%;
transform: scaleY(10);
opacity: 0;
}
100% {
top: 100%;
transform: scaleY(1);
opacity: 0;
}
}
@keyframes gradient {
to {
background-position: 200% center;
}
}
}

/*
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);
}
}
8 changes: 4 additions & 4 deletions components/cta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,18 @@ export default function Cta() {
/>
</div>
<div className="max-w6xl mx-auto px-4 sm:px-6">
<div className="bg-gradient-to-r from-transparent via-gray-800/50 py-12 md:py-20">
<div className="bg-linear-to-r from-transparent via-gray-800/50 py-12 md:py-20">
<div className="mx-auto max-w-3xl text-center">
<h2
className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text pb-8 font-nacelle text-3xl font-semibold text-transparent md:text-4xl"
className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,var(--color-gray-200),var(--color-indigo-200),var(--color-gray-50),var(--color-indigo-300),var(--color-gray-200))] bg-[length:200%_auto] bg-clip-text pb-8 font-nacelle text-3xl font-semibold text-transparent md:text-4xl"
data-aos="fade-up"
>
Join the content-first platform
</h2>
<div className="mx-auto max-w-xs sm:flex sm:max-w-none sm:justify-center">
<div data-aos="fade-up" data-aos-delay={400}>
<a
className="btn group mb-4 w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%] sm:mb-0 sm:w-auto"
className="btn group mb-4 w-full bg-linear-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_--theme(--color-white/.16)] hover:bg-[length:100%_150%] sm:mb-0 sm:w-auto"
href="#0"
>
<span className="relative inline-flex items-center">
Expand All @@ -41,7 +41,7 @@ export default function Cta() {
</div>
<div data-aos="fade-up" data-aos-delay={600}>
<a
className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%] sm:ml-4 sm:w-auto"
className="btn relative w-full bg-linear-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%] sm:ml-4 sm:w-auto"
href="#0"
>
Schedule Demo
Expand Down
8 changes: 4 additions & 4 deletions components/features.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export default function Features() {
/>
</div>
<div className="mx-auto max-w-6xl px-4 sm:px-6">
<div className="border-t py-12 [border-image:linear-gradient(to_right,transparent,theme(colors.slate.400/.25),transparent)1] md:py-20">
<div className="border-t py-12 [border-image:linear-gradient(to_right,transparent,--theme(--color-slate-400/.25),transparent)1] md:py-20">
{/* Section header */}
<div className="mx-auto max-w-3xl pb-4 text-center md:pb-12">
<div className="inline-flex items-center gap-3 pb-3 before:h-px before:w-8 before:bg-gradient-to-r before:from-transparent before:to-indigo-200/50 after:h-px after:w-8 after:bg-gradient-to-l after:from-transparent after:to-indigo-200/50">
<span className="inline-flex bg-gradient-to-r from-indigo-500 to-indigo-200 bg-clip-text text-transparent">
<div className="inline-flex items-center gap-3 pb-3 before:h-px before:w-8 before:bg-linear-to-r before:from-transparent before:to-indigo-200/50 after:h-px after:w-8 after:bg-linear-to-l after:from-transparent after:to-indigo-200/50">
<span className="inline-flex bg-linear-to-r from-indigo-500 to-indigo-200 bg-clip-text text-transparent">
Advanced Controls
</span>
</div>
<h2 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text pb-4 font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
<h2 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,var(--color-gray-200),var(--color-indigo-200),var(--color-gray-50),var(--color-indigo-300),var(--color-gray-200))] bg-[length:200%_auto] bg-clip-text pb-4 font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
Built for modern product teams
</h2>
<p className="text-lg text-indigo-200/65">
Expand Down
Loading

0 comments on commit 9c0a864

Please sign in to comment.