Skip to content

Commit 4ddd05d

Browse files
aedwardgaedwardg
authored
Merge pull request #50 from CodeCafeCommunity/46-add-tailwind-formatter
46 add tailwind formatter
2 parents 4e2e7c9 + 427e5ae commit 4ddd05d

File tree

9 files changed

+141
-55
lines changed

9 files changed

+141
-55
lines changed

‎package-lock.json‎

Lines changed: 80 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"lint-staged": "^15.3.0",
3434
"postcss": "^8.4.49",
3535
"prettier": "3.4.2",
36+
"prettier-plugin-tailwindcss": "^0.6.11",
3637
"tailwindcss": "^3.4.17",
3738
"typescript": "~5.6.2",
3839
"typescript-eslint": "^8.18.2",
@@ -41,5 +42,10 @@
4142
"lint-staged": {
4243
"*.{js,jsx,ts,tsx}": "eslint --fix",
4344
"*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
45+
},
46+
"prettier": {
47+
"plugins": [
48+
"prettier-plugin-tailwindcss"
49+
]
4450
}
4551
}

‎src/components/Layout/Footer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { Code } from "lucide-react";
33

44
export default function Footer() {
55
return (
6-
<footer className="py-16 bg-background flex justify-around">
6+
<footer className="flex justify-around bg-background py-16">
77
<div className="footer-container text-primary">
8-
<h4 className="text-xl font-bold flex items-center gap-2">
8+
<h4 className="flex items-center gap-2 text-xl font-bold">
99
<Code size={48} className="text-primary" />
1010
Code Cafe
1111
</h4>
1212
<p className="text-sm">Your home for coding and community</p>
1313
</div>
1414
<div className="footer-container text-primary">
15-
<h4 className="text-xl font-bold mb-4">Community</h4>
15+
<h4 className="mb-4 text-xl font-bold">Community</h4>
1616
<ul className="list-none">
1717
<li className="mb-3 text-sm">
1818
<Link to="/events">Events</Link>
@@ -23,7 +23,7 @@ export default function Footer() {
2323
</ul>
2424
</div>
2525
<div className="footer-container text-primary">
26-
<h4 className="text-xl font-bold mb-4">Resources</h4>
26+
<h4 className="mb-4 text-xl font-bold">Resources</h4>
2727
<ul className="list-none">
2828
<li className="mb-3 text-sm">Documentation</li>
2929
<li className="mb-3 text-sm">Blog</li>

‎src/components/Layout/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { NavLink } from "react-router";
22

33
export default function Header() {
44
return (
5-
<header className="sticky top-0 bg-primary/80 backdrop-blur-lg py-4 flex justify-around items-center">
6-
<NavLink className="flex gap-2 items-center" to="/">
5+
<header className="sticky top-0 flex items-center justify-around bg-primary/80 py-4 backdrop-blur-lg">
6+
<NavLink className="flex items-center gap-2" to="/">
77
<img
88
className="w-12 pr-2"
99
src={"/images/coffee_cup.png"}
1010
alt="Code Cafe Logo"
1111
/>
12-
<h1 className="text-secondary text-3xl">Code Cafe</h1>
12+
<h1 className="text-3xl text-secondary">Code Cafe</h1>
1313
</NavLink>
1414
<nav>
1515
<ul className="flex list-none gap-3 text-secondary">

‎src/routes/About/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function About() {
22
return (
3-
<main className="min-h-[25vh] grid place-items-center bg-primary">
3+
<main className="grid min-h-[25vh] place-items-center bg-primary">
44
<h3 className="text-3xl text-secondary">About Code Cafe</h3>
55
</main>
66
);

‎src/routes/Home/CTA.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ export default function CTA() {
22
return (
33
<section
44
id="cta"
5-
className="bg-primary flex justify-center items-center p-6 md:py-20"
5+
className="flex items-center justify-center bg-primary p-6 md:py-20"
66
>
7-
<div className="cta-container bg-gradient-to-r from-accent to-secondary shadow-md rounded-3xl p-10 md:px-60 md:py-20 flex flex-col justify-evenly items-center text-primary">
8-
<h2 className="text-3xl font-bold mb-4 text-center">
7+
<div className="cta-container flex flex-col items-center justify-evenly rounded-3xl bg-gradient-to-r from-accent to-secondary p-10 text-primary shadow-md md:px-60 md:py-20">
8+
<h2 className="mb-4 text-center text-3xl font-bold">
99
Ready to Join Our Community?
1010
</h2>
11-
<p className="text-center text-lg mb-6">
11+
<p className="mb-6 text-center text-lg">
1212
Start your journey with Code Cafe today and become part of a thriving
1313
developer community.
1414
</p>
1515
<a
16-
className="discord-button bg-primary px-8 py-4 rounded-lg border-2 border-primary text-secondary hover:bg-secondary hover:text-primary transition-all hover:no-underline"
16+
className="discord-button rounded-lg border-2 border-primary bg-primary px-8 py-4 text-secondary transition-all hover:bg-secondary hover:text-primary hover:no-underline"
1717
href="https://discord.gg/code-cafe"
1818
>
1919
Join Code Cafe

‎src/routes/Home/Features.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,35 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
33
export default function Features() {
44
return (
55
<section className="bg-background py-20">
6-
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
7-
<div className="inner rounded-lg flex gap-x-6 py-6 px-4">
8-
<div className="flex-1 flex flex-col items-center text-center py-6">
9-
<Users size={48} className="text-accent mb-2" />
10-
<h3 className="text-secondary text-xl mb-2 font-mono">
6+
<div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
7+
<div className="inner flex gap-x-6 rounded-lg px-4 py-6">
8+
<div className="flex flex-1 flex-col items-center py-6 text-center">
9+
<Users size={48} className="mb-2 text-accent" />
10+
<h3 className="mb-2 font-mono text-xl text-secondary">
1111
Active Community
1212
</h3>
13-
<p className="text-secondary text-sm">
13+
<p className="text-sm text-secondary">
1414
Connect with like-minded developers and build lasting
1515
relationships.
1616
</p>
1717
</div>
18-
<div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>
18+
<div className="box-border hidden h-[100px] w-[1px] self-center bg-[rgba(255,255,255,0.1)] bg-scroll bg-clip-border bg-repeat bg-origin-padding text-left font-sans text-base font-[cv05_ss01_ss03_zero] leading-6 text-white shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] lg:block"></div>
1919

20-
<div className="flex-1 flex flex-col items-center text-center py-6 font-mono">
21-
<CircleHelp size={48} className="text-accent mb-2" />
22-
<h3 className="text-secondary text-xl mb-2">Some other thing</h3>
23-
<p className="text-secondary text-sm">
20+
<div className="flex flex-1 flex-col items-center py-6 text-center font-mono">
21+
<CircleHelp size={48} className="mb-2 text-accent" />
22+
<h3 className="mb-2 text-xl text-secondary">Some other thing</h3>
23+
<p className="text-sm text-secondary">
2424
Description about that other thing.
2525
</p>
2626
</div>
27-
<div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>
27+
<div className="box-border hidden h-[100px] w-[1px] self-center bg-[rgba(255,255,255,0.1)] bg-scroll bg-clip-border bg-repeat bg-origin-padding text-left font-sans text-base font-[cv05_ss01_ss03_zero] leading-6 text-white shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] lg:block"></div>
2828

29-
<div className="flex-1 flex flex-col items-center text-center py-6">
30-
<BookOpen size={48} className="text-accent mb-2" />
31-
<h3 className="text-secondary text-xl mb-2 font-mono">
29+
<div className="flex flex-1 flex-col items-center py-6 text-center">
30+
<BookOpen size={48} className="mb-2 text-accent" />
31+
<h3 className="mb-2 font-mono text-xl text-secondary">
3232
Learning Resources
3333
</h3>
34-
<p className="text-secondary text-sm">
34+
<p className="text-sm text-secondary">
3535
Access curated learning materials and documentation.
3636
</p>
3737
</div>

‎src/routes/Home/Hero.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ export default function Hero() {
22
return (
33
<section
44
id="hero"
5-
className="min-h-[8vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
5+
className="flex min-h-[8vh] flex-col items-center justify-evenly bg-primary py-8 text-accent"
66
>
7-
<div className="text-center flex items-center justify-center flex-wrap xl:flex-nowrap p-8 lg:p-5">
7+
<div className="flex flex-wrap items-center justify-center p-8 text-center lg:p-5 xl:flex-nowrap">
88
<div className="flex flex-col items-center">
9-
<h2 className="text-xl md:text-xl lg:text-4xl mb-2">
9+
<h2 className="mb-2 text-xl md:text-xl lg:text-4xl">
1010
Where Code Meets Community
1111
</h2>
12-
<p className="font-mono text-lg max-w-prose">
12+
<p className="max-w-prose font-mono text-lg">
1313
Join our vibrant community of developers, share knowledge and grow
1414
together in a welcoming environment.
1515
</p>
1616
</div>
1717
</div>
18-
<div className="flex gap-10 my-6">
19-
<button className="px-8 py-4 text-primary rounded-lg border-2 border-secondary hover:border-secondary bg-secondary hover:text-secondary hover:bg-primary transition-all">
18+
<div className="my-6 flex gap-10">
19+
<button className="rounded-lg border-2 border-secondary bg-secondary px-8 py-4 text-primary transition-all hover:border-secondary hover:bg-primary hover:text-secondary">
2020
Join us
2121
</button>
2222
</div>

‎src/routes/Home/Showcase.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,55 @@ import { Smile } from "lucide-react";
33
export default function Showcase() {
44
return (
55
<section className="flex flex-col items-center bg-background py-20">
6-
<h2 className="text-xl md:text-xl lg:text-4xl mb-6 text-primary">
6+
<h2 className="mb-6 text-xl text-primary md:text-xl lg:text-4xl">
77
Community Showcase
88
</h2>
9-
<div className="flex flex-1 gap-1 mx-4">
10-
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
11-
<div className="inner rounded-lg py-6 px-4">
12-
<div className="flex-1 flex flex-col text-center px-6 py-6">
9+
<div className="mx-4 flex flex-1 gap-1">
10+
<div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
11+
<div className="inner rounded-lg px-4 py-6">
12+
<div className="flex flex-1 flex-col px-6 py-6 text-center">
1313
<div className="flex flex-1 justify-start">
14-
<Smile size={48} className="text-accent mb-2 mr-4" />
15-
<h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
14+
<Smile size={48} className="mb-2 mr-4 text-accent" />
15+
<h3 className="mb-2 flex flex-col items-start font-mono text-xl text-secondary">
1616
Sarah Johnson
1717
<span className="text-sm">Task Manager App</span>
1818
</h3>
1919
</div>
20-
<p className="text-secondary text-left text-md max-w-full">
20+
<p className="text-md max-w-full text-left text-secondary">
2121
A sleek, intuitive task management application built with React
2222
and Node.js.
2323
</p>
2424
</div>
2525
</div>
2626
</div>
27-
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
28-
<div className="inner rounded-lg py-6 px-4">
29-
<div className="flex-1 flex flex-col text-center px-6 py-6">
27+
<div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
28+
<div className="inner rounded-lg px-4 py-6">
29+
<div className="flex flex-1 flex-col px-6 py-6 text-center">
3030
<div className="flex flex-1 justify-start">
31-
<Smile size={48} className="text-accent mb-2 mr-4" />
32-
<h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
31+
<Smile size={48} className="mb-2 mr-4 text-accent" />
32+
<h3 className="mb-2 flex flex-col items-start font-mono text-xl text-secondary">
3333
Mike Chen
3434
<span className="text-sm">Weather Dashboard</span>
3535
</h3>
3636
</div>
37-
<p className="text-secondary text-left text-md max-w-full">
37+
<p className="text-md max-w-full text-left text-secondary">
3838
Real-time weather information visualized beautifully using D3.js
3939
and OpenWeatherMap API.
4040
</p>
4141
</div>
4242
</div>
4343
</div>
44-
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
45-
<div className="inner rounded-lg py-6 px-4">
46-
<div className="flex-1 flex flex-col text-center px-6 py-6">
44+
<div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
45+
<div className="inner rounded-lg px-4 py-6">
46+
<div className="flex flex-1 flex-col px-6 py-6 text-center">
4747
<div className="flex flex-1 justify-start">
48-
<Smile size={48} className="text-accent mb-2 mr-4" />
49-
<h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
48+
<Smile size={48} className="mb-2 mr-4 text-accent" />
49+
<h3 className="mb-2 flex flex-col items-start font-mono text-xl text-secondary">
5050
Emily Rodriguez
5151
<span className="text-sm">Code Snippet Library</span>
5252
</h3>
5353
</div>
54-
<p className="text-secondary text-left text-md max-w-full">
54+
<p className="text-md max-w-full text-left text-secondary">
5555
A collaborative platform for developers to share and discover
5656
useful code snippets.
5757
</p>

0 commit comments

Comments
 (0)