Skip to content

Commit 5c849a2

Browse files
sothulthornsothulthorn
committed
Implement tailwind css config
1 parent 6a8f4fc commit 5c849a2

File tree

6 files changed

+475
-129
lines changed

6 files changed

+475
-129
lines changed

‎app/globals.css

+154-16
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,164 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
5+
@import url('../styles/theme.css');
6+
7+
body {
8+
font-family: 'Inter', sans-serif;
99
}
1010

11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
11+
@layer utilities {
12+
.flex-center {
13+
@apply flex justify-center items-center;
14+
}
15+
16+
.flex-between {
17+
@apply flex justify-between items-center;
18+
}
19+
20+
.flex-start {
21+
@apply flex justify-start items-center;
22+
}
23+
24+
.card-wrapper {
25+
@apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100;
26+
}
27+
28+
.btn {
29+
@apply bg-light-800 dark:bg-dark-300 !important;
30+
}
31+
32+
.btn-secondary {
33+
@apply bg-light-800 dark:bg-dark-400 !important;
34+
}
35+
36+
.btn-tertiary {
37+
@apply bg-light-700 dark:bg-dark-300 !important;
38+
}
39+
40+
.markdown {
41+
@apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
42+
}
43+
44+
.primary-gradient {
45+
background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
46+
}
47+
48+
.dark-gradient {
49+
background: linear-gradient(
50+
232deg,
51+
rgba(23, 28, 35, 0.41) 0%,
52+
rgba(19, 22, 28, 0.7) 100%
53+
);
54+
}
55+
56+
.tab {
57+
@apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important;
1658
}
1759
}
1860

19-
body {
20-
color: rgb(var(--foreground-rgb));
61+
.no-focus {
62+
@apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
63+
}
64+
65+
.active-theme {
66+
filter: invert(53%) sepia(98%) saturate(3332%) hue-rotate(0deg)
67+
brightness(104%) contrast(106%) !important;
68+
}
69+
70+
.light-gradient {
2171
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
72+
132deg,
73+
rgba(247, 249, 255, 0.5) 0%,
74+
rgba(229, 237, 255, 0.25) 100%
75+
);
76+
}
77+
78+
.primary-text-gradient {
79+
background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
80+
background-clip: text;
81+
-webkit-background-clip: text;
82+
-webkit-text-fill-color: transparent;
83+
}
84+
85+
.custom-scrollbar::-webkit-scrollbar {
86+
width: 3px;
87+
height: 3px;
88+
border-radius: 2px;
89+
}
90+
91+
.custom-scrollbar::-webkit-scrollbar-track {
92+
background: #ffffff;
93+
}
94+
95+
.custom-scrollbar::-webkit-scrollbar-thumb {
96+
background: #888;
97+
border-radius: 50px;
98+
}
99+
100+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
101+
background: #555;
102+
}
103+
104+
/* Markdown Start */
105+
.markdown a {
106+
color: #1da1f2;
107+
}
108+
109+
.markdown a,
110+
code {
111+
/* These are technically the same, but use both */
112+
overflow-wrap: break-word;
113+
word-wrap: break-word;
114+
115+
-ms-word-break: break-all;
116+
/* This is the dangerous one in WebKit, as it breaks things wherever */
117+
word-break: break-all;
118+
/* Instead use this non-standard one: */
119+
word-break: break-word;
120+
121+
/* Adds a hyphen where the word breaks, if supported (No Blink) */
122+
-ms-hyphens: auto;
123+
-moz-hyphens: auto;
124+
-webkit-hyphens: auto;
125+
hyphens: auto;
126+
127+
padding: 2px;
128+
color: #ff7000 !important;
129+
}
130+
131+
.markdown pre {
132+
display: grid;
133+
width: 100%;
134+
}
135+
136+
.markdown pre code {
137+
width: 100%;
138+
display: block;
139+
overflow-x: auto;
140+
141+
color: inherit !important;
142+
}
143+
/* Markdown End */
144+
145+
/* Clerk */
146+
.cl-internal-b3fm6y {
147+
background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%) !important;
148+
}
149+
150+
.hash-span {
151+
margin-top: -140px;
152+
padding-bottom: 140px;
153+
display: block;
154+
}
155+
156+
/* Hide scrollbar for Chrome, Safari and Opera */
157+
.no-scrollbar::-webkit-scrollbar {
158+
display: none;
159+
}
160+
161+
/* Hide scrollbar for IE, Edge and Firefox */
162+
.no-scrollbar {
163+
-ms-overflow-style: none; /* IE and Edge */
164+
scrollbar-width: none; /* Firefox */
27165
}

‎app/page.tsx

+3-109
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,7 @@
1-
import Image from 'next/image';
2-
31
export default function Home() {
42
return (
5-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
6-
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
7-
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
8-
Get started by editing&nbsp;
9-
<code className="font-mono font-bold">app/page.tsx</code>
10-
</p>
11-
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
12-
<a
13-
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{' '}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className="dark:invert"
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
29-
</div>
30-
31-
<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
32-
<Image
33-
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
41-
42-
<div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2 className={`mb-3 text-2xl font-semibold`}>
50-
Docs{' '}
51-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
52-
-&gt;
53-
</span>
54-
</h2>
55-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
56-
Find in-depth information about Next.js features and API.
57-
</p>
58-
</a>
59-
60-
<a
61-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
62-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
>
66-
<h2 className={`mb-3 text-2xl font-semibold`}>
67-
Learn{' '}
68-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
69-
-&gt;
70-
</span>
71-
</h2>
72-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
73-
Learn about Next.js in an interactive course with&nbsp;quizzes!
74-
</p>
75-
</a>
76-
77-
<a
78-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
79-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className={`mb-3 text-2xl font-semibold`}>
84-
Templates{' '}
85-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
86-
-&gt;
87-
</span>
88-
</h2>
89-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
90-
Explore the Next.js 13 playground.
91-
</p>
92-
</a>
93-
94-
<a
95-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
96-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
97-
target="_blank"
98-
rel="noopener noreferrer"
99-
>
100-
<h2 className={`mb-3 text-2xl font-semibold`}>
101-
Deploy{' '}
102-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
103-
-&gt;
104-
</span>
105-
</h2>
106-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
107-
Instantly deploy your Next.js site to a shareable URL with Vercel.
108-
</p>
109-
</a>
110-
</div>
111-
</main>
3+
<div>
4+
<h1 className="h1-bold">Next JS 13 &apos;We're coming!</h1>
5+
</div>
1126
);
1137
}

‎package-lock.json

+46
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@tailwindcss/typography": "github:tailwindcss/typography",
1213
"@types/node": "20.9.0",
1314
"@types/react": "18.2.37",
1415
"@types/react-dom": "18.2.15",
@@ -23,6 +24,7 @@
2324
"react": "18.2.0",
2425
"react-dom": "18.2.0",
2526
"tailwindcss": "3.3.5",
27+
"tailwindcss-animate": "^1.0.7",
2628
"typescript": "5.2.2"
2729
}
2830
}

0 commit comments

Comments
 (0)