Skip to content

Commit

Permalink
4.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 9282ede commit cfca943
Show file tree
Hide file tree
Showing 23 changed files with 1,511 additions and 3,121 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

## [4.0.0] - 2025-02-04

- Updgrade to Tailwind v4
- Update dependencies

## [3.1.0] - 2024-12-08

- Update dependencies + Upgrade to Next.js 15
Expand Down
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
![Simple TailwindCSS template preview](https://github.com/cruip/tailwind-landing-page-template/assets/2683512/f9a98fab-a1bc-4fb5-8572-4de0b6bd932a)

**Simple Light** is a free landing page template built on top of **TailwindCSS** and fully coded in **React** / **Next.js**. Simple light is designed to provide all the basic components a developer need to create a landing page for 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 X if you build anything cool/useful with it.
Created and maintained with ❤️ by [Cruip.com](https://cruip.com/).

Expand Down
4 changes: 2 additions & 2 deletions app/(auth)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function AuthLayout({
className="pointer-events-none absolute bottom-0 left-0 -translate-x-1/3"
aria-hidden="true"
>
<div className="h-80 w-80 rounded-full bg-gradient-to-tr from-blue-500 opacity-70 blur-[160px]"></div>
<div className="h-80 w-80 rounded-full bg-linear-to-tr from-blue-500 opacity-70 blur-[160px]"></div>
</div>

{/* Content */}
Expand Down Expand Up @@ -58,7 +58,7 @@ export default function AuthLayout({
{/* Illustration */}
<div className="absolute left-32 top-1/2 w-[500px] -translate-y-1/2">
<div className="aspect-video w-full rounded-2xl bg-gray-900 px-5 py-3 shadow-xl transition duration-300">
<div className="relative mb-8 flex items-center justify-between before:block before:h-[9px] before:w-[41px] before:bg-[length:16px_9px] before:[background-image:radial-gradient(circle_at_4.5px_4.5px,_theme(colors.gray.600)_4.5px,_transparent_0)] after:w-[41px]">
<div className="relative mb-8 flex items-center justify-between before:block before:h-[9px] before:w-[41px] before:bg-[length:16px_9px] before:[background-image:radial-gradient(circle_at_4.5px_4.5px,var(--color-gray-600)_4.5px,transparent_0)] after:w-[41px]">
<span className="text-[13px] font-medium text-white">
cruip.com
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/(auth)/reset-password/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function ResetPassword() {
</div>
</div>
<div className="mt-6">
<button className="btn w-full bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-sm hover:bg-[length:100%_150%]">
Reset Password
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/(auth)/signin/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function SignIn() {
</div>
</div>
<div className="mt-6">
<button className="btn w-full bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-sm hover:bg-[length:100%_150%]">
Sign In
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/(auth)/signup/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,11 @@ export default function SignUp() {
</div>
</div>
<div className="mt-6 space-y-3">
<button className="btn w-full bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-sm hover:bg-[length:100%_150%]">
Register
</button>
<div className="text-center text-sm italic text-gray-400">Or</div>
<button className="btn w-full bg-gradient-to-t from-gray-900 to-gray-700 bg-[length:100%_100%] bg-[bottom] text-white shadow hover:bg-[length:100%_150%]">
<button className="btn w-full bg-linear-to-t from-gray-900 to-gray-700 bg-[length:100%_100%] bg-[bottom] text-white shadow-sm hover:bg-[length:100%_150%]">
Continue with GitHub
</button>
</div>
Expand Down
133 changes: 53 additions & 80 deletions app/css/additional-styles/theme.css
Original file line number Diff line number Diff line change
@@ -1,120 +1,93 @@
.form-input:focus,
.form-textarea:focus,
.form-multiselect:focus,
.form-select:focus,
.form-checkbox:focus,
.form-radio:focus {
@apply ring-0;
}

/* Scrollspy links */
[data-scrollspy-link].scrollspy-active {
@apply font-medium text-blue-500;
@apply text-blue-500 font-medium;
}

/* Custom AOS animations */
[data-aos="zoom-y-out"] {
transform: scaleX(1.03);
opacity: 0;
transition-property: transform, opacity;
transform: scaleX(1.03);
opacity: 0;
transition-property: transform, opacity;
}

@media screen {
html:not(.no-js) [data-aos="fade-up"] {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
html:not(.no-js) body [data-aos=fade-up] {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

html:not(.no-js) [data-aos="fade-down"] {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
html:not(.no-js) body [data-aos=fade-down] {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

html:not(.no-js) [data-aos="fade-right"] {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
html:not(.no-js) body [data-aos=fade-right] {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}

html:not(.no-js) [data-aos="fade-left"] {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
html:not(.no-js) body [data-aos=fade-left] {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}

html:not(.no-js) [data-aos="fade-up-right"] {
-webkit-transform: translate3d(-10px, 10px, 0);
transform: translate3d(-10px, 10px, 0);
html:not(.no-js) body [data-aos=fade-up-right] {
-webkit-transform: translate3d(-10px, 10px, 0);
transform: translate3d(-10px, 10px, 0);
}

html:not(.no-js) [data-aos="fade-up-left"] {
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
html:not(.no-js) body [data-aos=fade-up-left] {
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
}

html:not(.no-js) [data-aos="fade-down-right"] {
-webkit-transform: translate3d(-10px, -10px, 0);
transform: translate3d(-10px, -10px, 0);
html:not(.no-js) body [data-aos=fade-down-right] {
-webkit-transform: translate3d(-10px, -10px, 0);
transform: translate3d(-10px, -10px, 0);
}

html:not(.no-js) [data-aos="fade-down-left"] {
-webkit-transform: translate3d(10px, -10px, 0);
transform: translate3d(10px, -10px, 0);
html:not(.no-js) body [data-aos=fade-down-left] {
-webkit-transform: translate3d(10px, -10px, 0);
transform: translate3d(10px, -10px, 0);
}

html:not(.no-js) [data-aos="zoom-in-up"] {
-webkit-transform: translate3d(0, 10px, 0) scale(0.6);
transform: translate3d(0, 10px, 0) scale(0.6);
html:not(.no-js) body [data-aos=zoom-in-up] {
-webkit-transform: translate3d(0, 10px, 0) scale(.6);
transform: translate3d(0, 10px, 0) scale(.6);
}

html:not(.no-js) [data-aos="zoom-in-down"] {
-webkit-transform: translate3d(0, -10px, 0) scale(0.6);
transform: translate3d(0, -10px, 0) scale(0.6);
html:not(.no-js) body [data-aos=zoom-in-down] {
-webkit-transform: translate3d(0, -10px, 0) scale(.6);
transform: translate3d(0, -10px, 0) scale(.6);
}

html:not(.no-js) [data-aos="zoom-in-right"] {
-webkit-transform: translate3d(-10px, 0, 0) scale(0.6);
transform: translate3d(-10px, 0, 0) scale(0.6);
html:not(.no-js) body [data-aos=zoom-in-right] {
-webkit-transform: translate3d(-10px, 0, 0) scale(.6);
transform: translate3d(-10px, 0, 0) scale(.6);
}

html:not(.no-js) [data-aos="zoom-in-left"] {
-webkit-transform: translate3d(10px, 0, 0) scale(0.6);
transform: translate3d(10px, 0, 0) scale(0.6);
html:not(.no-js) body [data-aos=zoom-in-left] {
-webkit-transform: translate3d(10px, 0, 0) scale(.6);
transform: translate3d(10px, 0, 0) scale(.6);
}

html:not(.no-js) [data-aos="zoom-out-up"] {
-webkit-transform: translate3d(0, 10px, 0) scale(1.2);
transform: translate3d(0, 10px, 0) scale(1.2);
html:not(.no-js) body [data-aos=zoom-out-up] {
-webkit-transform: translate3d(0, 10px, 0) scale(1.2);
transform: translate3d(0, 10px, 0) scale(1.2);
}

html:not(.no-js) [data-aos="zoom-out-down"] {
-webkit-transform: translate3d(0, -10px, 0) scale(1.2);
transform: translate3d(0, -10px, 0) scale(1.2);
html:not(.no-js) body [data-aos=zoom-out-down] {
-webkit-transform: translate3d(0, -10px, 0) scale(1.2);
transform: translate3d(0, -10px, 0) scale(1.2);
}

html:not(.no-js) [data-aos="zoom-out-right"] {
-webkit-transform: translate3d(-10px, 0, 0) scale(1.2);
transform: translate3d(-10px, 0, 0) scale(1.2);
html:not(.no-js) body [data-aos=zoom-out-right] {
-webkit-transform: translate3d(-10px, 0, 0) scale(1.2);
transform: translate3d(-10px, 0, 0) scale(1.2);
}

html:not(.no-js) [data-aos="zoom-out-left"] {
-webkit-transform: translate3d(10px, 0, 0) scale(1.2);
transform: translate3d(10px, 0, 0) scale(1.2);
html:not(.no-js) body [data-aos=zoom-out-left] {
-webkit-transform: translate3d(10px, 0, 0) scale(1.2);
transform: translate3d(10px, 0, 0) scale(1.2);
}
}

[data-rehype-pretty-code-figure] pre {
@apply rounded-2xl !bg-gray-900 p-5;
}

[data-rehype-pretty-code-figure] code {
@apply grid min-w-full break-words rounded-none border-none bg-transparent p-0 text-sm text-gray-900;
counter-reset: line;
box-decoration-break: clone;
}

[data-rehype-pretty-code-title] {
@apply rounded-t-lg border border-gray-800 bg-gray-900 px-4 py-3 font-mono text-xs text-gray-200;
}

[data-rehype-pretty-code-title] + pre {
@apply mt-0 rounded-t-none border-t-0;
}
}
28 changes: 12 additions & 16 deletions app/css/additional-styles/utility-patterns.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/* Buttons */
.btn,
.btn-sm {
@apply inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all;
@apply text-sm font-medium inline-flex items-center justify-center rounded-lg whitespace-nowrap transition-all;
}

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

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

/* Forms */
Expand All @@ -26,34 +26,30 @@ input[type="search"]::-webkit-search-results-decoration {
.form-select,
.form-checkbox,
.form-radio {
@apply border border-gray-200 bg-white focus:border-blue-300;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox {
@apply rounded-lg;
@apply border border-gray-200 shadow-xs rounded-lg focus:ring-0 focus:ring-offset-0;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
@apply px-4 py-2.5 text-sm shadow-sm;
@apply bg-white text-sm py-2.5 px-4 focus:border-blue-300;
}

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

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

.form-checkbox,
.form-radio {
@apply rounded-sm text-gray-800;
@apply text-gray-800 checked:bg-blue-500 checked:border-transparent focus-visible:not-checked:border-blue-300;
}

.form-checkbox {
@apply rounded-xs;
}
Loading

0 comments on commit cfca943

Please sign in to comment.