From 9c0a864ad808610c1b454a57a86dd0193d1c7a5d Mon Sep 17 00:00:00 2001 From: pasqualevitiello Date: Tue, 4 Feb 2025 00:10:44 +0100 Subject: [PATCH] 5.0.0 - Upgrade to Tailwind 4 --- CHANGELOG.md | 5 + README.md | 6 +- app/(auth)/reset-password/page.tsx | 4 +- app/(auth)/signin/page.tsx | 8 +- app/(auth)/signup/page.tsx | 8 +- app/css/additional-styles/custom-fonts.css | 31 - .../additional-styles/utility-patterns.css | 28 +- app/css/style.css | 95 +- components/cta.tsx | 8 +- components/features.tsx | 8 +- components/hero-home.tsx | 6 +- components/modal-video.tsx | 10 +- components/testimonials.tsx | 16 +- components/ui/header.tsx | 6 +- components/workflows.tsx | 30 +- package-lock.json | 2780 ----------------- package.json | 22 +- pnpm-lock.yaml | 1123 +++++++ postcss.config.js | 4 +- tailwind.config.js | 50 - 20 files changed, 1300 insertions(+), 2948 deletions(-) delete mode 100644 app/css/additional-styles/custom-fonts.css delete mode 100644 package-lock.json create mode 100644 pnpm-lock.yaml delete mode 100644 tailwind.config.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 60a7e1650..4495fa2b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/README.md b/README.md index 0dee77e51..47d74c1f2 100644 --- a/README.md +++ b/README.md @@ -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). @@ -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. diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx index 7e512430b..ed77a6202 100644 --- a/app/(auth)/reset-password/page.tsx +++ b/app/(auth)/reset-password/page.tsx @@ -12,7 +12,7 @@ export default function ResetPassword() {
{/* Section header */}
-

+

Reset your password

@@ -33,7 +33,7 @@ export default function ResetPassword() { />
-
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx index 62d5307f5..e7da39ed7 100644 --- a/app/(auth)/signin/page.tsx +++ b/app/(auth)/signin/page.tsx @@ -12,7 +12,7 @@ export default function SignIn() {
{/* Section header */}
-

+

Welcome back

@@ -57,13 +57,13 @@ export default function SignIn() {
- -
+
or
-
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx index 8708750aa..17d4f045a 100644 --- a/app/(auth)/signup/page.tsx +++ b/app/(auth)/signup/page.tsx @@ -12,7 +12,7 @@ export default function SignUp() {
{/* Section header */}
-

+

Create an account

@@ -79,13 +79,13 @@ export default function SignUp() {
- -
+
or
-
diff --git a/app/css/additional-styles/custom-fonts.css b/app/css/additional-styles/custom-fonts.css deleted file mode 100644 index daa39117f..000000000 --- a/app/css/additional-styles/custom-fonts.css +++ /dev/null @@ -1,31 +0,0 @@ -@font-face { - font-family: "Nacelle"; - font-weight: 400; - font-style: normal; - font-display: fallback; - src: url("fonts/nacelle-regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Nacelle"; - font-weight: 400; - font-style: italic; - font-display: fallback; - src: url("fonts/nacelle-italic.woff2") format("woff2"); -} - -@font-face { - font-family: "Nacelle"; - font-weight: 600; - font-style: normal; - font-display: fallback; - src: url("fonts/nacelle-semibold.woff2") format("woff2"); -} - -@font-face { - font-family: "Nacelle"; - font-weight: 600; - font-style: italic; - font-display: fallback; - src: url("fonts/nacelle-semibolditalic.woff2") format("woff2"); -} diff --git a/app/css/additional-styles/utility-patterns.css b/app/css/additional-styles/utility-patterns.css index 6b71f7c30..6a41f3bf4 100644 --- a/app/css/additional-styles/utility-patterns.css +++ b/app/css/additional-styles/utility-patterns.css @@ -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, @@ -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; } diff --git a/app/css/style.css b/app/css/style.css index 6e289401c..3cc47ab64 100644 --- a/app/css/style.css +++ b/app/css/style.css @@ -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); + } +} diff --git a/components/cta.tsx b/components/cta.tsx index 635bcd29f..2a9ff0c38 100644 --- a/components/cta.tsx +++ b/components/cta.tsx @@ -17,10 +17,10 @@ export default function Cta() { />
-
+

Join the content-first platform @@ -28,7 +28,7 @@ export default function Cta() {
-
+
{/* Section header */}
-
- +
+ Advanced Controls
-

+

Built for modern product teams

diff --git a/components/hero-home.tsx b/components/hero-home.tsx index 7cb7543cf..17948e008 100755 --- a/components/hero-home.tsx +++ b/components/hero-home.tsx @@ -10,7 +10,7 @@ export default function HeroHome() { {/* Section header */}

AI-driven tools for product teams @@ -27,7 +27,7 @@ export default function HeroHome() {
Schedule Demo diff --git a/components/modal-video.tsx b/components/modal-video.tsx index baaa22f5d..1340a1649 100644 --- a/components/modal-video.tsx +++ b/components/modal-video.tsx @@ -46,7 +46,7 @@ export default function ModalVideo({ {/* Video thumbnail */} {/* Button #2 */} {/* Button #3 */} {/* Button #4 */} {/* Button #5 */}