Skip to content

Commit e350f08

Browse files
kentcdoddskentcdodds
committed
tailwind
1 parent 11b339a commit e350f08

15 files changed

+1987
-150
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ Learn more about [Remix Stacks](https://remix.run/stacks).
1010
- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments
1111
- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
1212
- Database ORM with [Prisma](https://prisma.io)
13+
- Styling with [Tailwind](https://tailwindcss.com/)
1314
- End-to-end testing with [Cypress](https://cypress.io)
1415
- Local third party request mocking with [MSW](https://mswjs.io)
1516
- Unit testing with [Vitest](https://vitest.dev)
1617
- Code formatting with [prettier](https://prettier.io)
1718
- Linting with [ESLint](https://eslint.org)
1819
- Static Types with [TypeScript](https://typescriptlang.org)
1920

21+
Not a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.
22+
2023
## Fly Setup
2124

2225
1. [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)

‎app/root.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {
99
} from "remix";
1010
import type { LinksFunction, MetaFunction, LoaderFunction } from "remix";
1111

12-
import appStyles from "./styles/app.css";
12+
import tailwindStylesheetUrl from "./styles/tailwind.css";
1313
import { getUser } from "./session.server";
1414

1515
export const links: LinksFunction = () => {
16-
return [{ rel: "stylesheet", href: appStyles }];
16+
return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
1717
};
1818

1919
export const meta: MetaFunction = () => {
@@ -41,7 +41,7 @@ export default function App() {
4141
<Meta />
4242
<Links />
4343
</head>
44-
<body>
44+
<body className="bg-[url('/indie.jpg')] bg-center bg-origin-border bg-no-repeat">
4545
<div>
4646
<Outlet />
4747
</div>

‎app/routes/index.tsx

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,9 @@ import { useOptionalUser } from "~/utils";
44
export default function Index() {
55
const user = useOptionalUser();
66
return (
7-
<div
8-
style={{
9-
maxWidth: 500,
10-
margin: "30vh auto 0 auto",
11-
}}
12-
>
13-
<div style={{ textAlign: "center", paddingBottom: 16 }}>
14-
<h1>Remix Notes App</h1>
7+
<div className="max-w-lg mt-[30vh] mx-auto p-8 bg-white rounded-md">
8+
<div className="text-center pb-4">
9+
<h1 className="text-5xl">Remix Indie Stack</h1>
1510
<p>
1611
This app will get you started with Remix in no time.
1712
<br />
@@ -24,9 +19,13 @@ export default function Index() {
2419
)}
2520
</p>
2621
{user ? (
27-
<Link to="/notes">Check your notes</Link>
22+
<Link className="underline text-blue-500" to="/notes">
23+
Check your notes
24+
</Link>
2825
) : (
29-
<Link to="/login">Login</Link>
26+
<Link className="underline text-blue-500" to="/login">
27+
Login
28+
</Link>
3029
)}
3130
</div>
3231
<div>
@@ -36,19 +35,39 @@ export default function Index() {
3635
Please check the README.md file for instructions on how to get this
3736
project deployed.
3837
</p>
39-
<p>Learn more about Remix:</p>
40-
<ul>
38+
<p className="pt-4">Learn more about Remix:</p>
39+
<ul className="pt-2 list-disc list-inside">
4140
<li>
42-
<a href="https://remix.run/docs">Remix Docs</a>
41+
<a
42+
className="underline text-blue-500"
43+
href="https://remix.run/docs"
44+
>
45+
Remix Docs
46+
</a>
4347
</li>
4448
<li>
45-
<a href="https://remix.run/stacks">Remix Stacks</a>
49+
<a
50+
className="underline text-blue-500"
51+
href="https://remix.run/stacks"
52+
>
53+
Remix Stacks
54+
</a>
4655
</li>
4756
<li>
48-
<a href="https://rmx.as/discord">Remix Discord Community</a>
57+
<a
58+
className="underline text-blue-500"
59+
href="https://rmx.as/discord"
60+
>
61+
Remix Discord Community
62+
</a>
4963
</li>
5064
<li>
51-
<a href="https://github.com/remix-run/remix">Remix GitHub</a>
65+
<a
66+
className="underline text-blue-500"
67+
href="https://github.com/remix-run/remix"
68+
>
69+
Remix GitHub
70+
</a>
5271
</li>
5372
</ul>
5473
</div>

‎app/routes/join.tsx

Lines changed: 18 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -87,38 +87,17 @@ export default function JoinPage() {
8787
}, [actionData]);
8888

8989
return (
90-
<div
91-
style={{
92-
maxWidth: 500,
93-
margin: "30vh auto 0 auto",
94-
}}
95-
>
96-
<h1 style={{ textAlign: "center" }}>Join Remix Notes</h1>
97-
<Form
98-
method="post"
99-
style={{
100-
display: "flex",
101-
flexDirection: "column",
102-
gap: 12,
103-
width: 300,
104-
margin: "auto",
105-
}}
106-
>
90+
<div className="max-w-lg mt-[30vh] mx-auto p-8 bg-white rounded-md">
91+
<h1 className="text-center text-2xl pb-4">Join Remix Notes</h1>
92+
<Form method="post" className="flex flex-col gap-3 w-72 mx-auto">
10793
<input type="hidden" name="redirectTo" value={redirectTo} />
10894
<div>
109-
<label
110-
style={{
111-
display: "flex",
112-
flexDirection: "column",
113-
gap: 4,
114-
width: "100%",
115-
}}
116-
>
95+
<label className="flex flex-col gap-1 w-full">
11796
<span>Email address</span>
11897
<input
11998
ref={emailRef}
12099
autoFocus={true}
121-
style={{ flex: 1, lineHeight: 2, fontSize: "1.1rem" }}
100+
className="flex-1 leading-loose text-lg px-3 border-blue-500 border-2 rounded-md"
122101
name="email"
123102
type="email"
124103
autoComplete="email"
@@ -129,25 +108,18 @@ export default function JoinPage() {
129108
/>
130109
</label>
131110
{actionData?.errors?.email && (
132-
<Alert style={{ color: "red", paddingTop: 4 }} id="email-error">
111+
<Alert className="text-red-700 pt-1" id="email-error">
133112
{actionData.errors.email}
134113
</Alert>
135114
)}
136115
</div>
137116

138117
<div>
139-
<label
140-
style={{
141-
display: "flex",
142-
flexDirection: "column",
143-
gap: 4,
144-
width: "100%",
145-
}}
146-
>
118+
<label className="flex flex-col gap-1 w-full">
147119
<span>Password</span>
148120
<input
149121
ref={passwordRef}
150-
style={{ flex: 1, lineHeight: 2, fontSize: "1.1rem" }}
122+
className="flex-1 leading-loose text-lg px-3 border-blue-500 border-2 rounded-md"
151123
name="password"
152124
type="password"
153125
autoComplete="new-password"
@@ -158,20 +130,26 @@ export default function JoinPage() {
158130
/>
159131
</label>
160132
{actionData?.errors?.password && (
161-
<Alert style={{ color: "red", paddingTop: 4 }} id="password-error">
133+
<Alert className="text-red-700 pt-1" id="password-error">
162134
{actionData.errors.password}
163135
</Alert>
164136
)}
165137
</div>
166138

167-
<div style={{ textAlign: "right" }}>
168-
<button type="submit">Join</button>
139+
<div className="text-right">
140+
<button
141+
type="submit"
142+
className="bg-blue-700 text-blue-100 hover:bg-blue-900 focus:bg-blue-900 rounded-sm py-2 px-4"
143+
>
144+
Join
145+
</button>
169146
</div>
170147
</Form>
171148

172-
<div style={{ paddingTop: 24, textAlign: "right" }}>
149+
<div className="text-right pt-6">
173150
Already have an account?{" "}
174151
<Link
152+
className="text-blue-500 underline"
175153
to={{
176154
pathname: "/login",
177155
search: redirectTo ? `?redirectTo=${redirectTo}` : undefined,

‎app/routes/login.tsx

Lines changed: 18 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -85,38 +85,17 @@ export default function LoginPage() {
8585
}, [actionData]);
8686

8787
return (
88-
<div
89-
style={{
90-
maxWidth: 500,
91-
margin: "30vh auto 0 auto",
92-
}}
93-
>
94-
<h1 style={{ textAlign: "center" }}>Sign in to Remix Notes</h1>
95-
<Form
96-
method="post"
97-
style={{
98-
display: "flex",
99-
flexDirection: "column",
100-
gap: 12,
101-
width: 300,
102-
margin: "auto",
103-
}}
104-
>
88+
<div className="max-w-lg mt-[30vh] mx-auto p-8 bg-white rounded-md">
89+
<h1 className="text-center text-2xl pb-4">Sign in to Remix Notes</h1>
90+
<Form method="post" className="flex flex-col gap-3 w-72 mx-auto">
10591
<input type="hidden" name="redirectTo" value={redirectTo} />
10692
<div>
107-
<label
108-
style={{
109-
display: "flex",
110-
flexDirection: "column",
111-
gap: 4,
112-
width: "100%",
113-
}}
114-
>
93+
<label className="flex flex-col gap-1 w-full">
11594
<span>Email address</span>
11695
<input
11796
ref={emailRef}
11897
autoFocus={true}
119-
style={{ flex: 1, lineHeight: 2, fontSize: "1.1rem" }}
98+
className="flex-1 leading-loose text-lg px-3 border-blue-500 border-2 rounded-md"
12099
name="email"
121100
type="email"
122101
autoComplete="email"
@@ -127,25 +106,18 @@ export default function LoginPage() {
127106
/>
128107
</label>
129108
{actionData?.errors?.email && (
130-
<Alert style={{ color: "red", paddingTop: 4 }} id="email-error">
109+
<Alert className="text-red-700 pt-1" id="email-error">
131110
{actionData.errors.email}
132111
</Alert>
133112
)}
134113
</div>
135114

136115
<div>
137-
<label
138-
style={{
139-
display: "flex",
140-
flexDirection: "column",
141-
gap: 4,
142-
width: "100%",
143-
}}
144-
>
116+
<label className="flex flex-col gap-1 w-full">
145117
<span>Password</span>
146118
<input
147119
ref={passwordRef}
148-
style={{ flex: 1, lineHeight: 2, fontSize: "1.1rem" }}
120+
className="flex-1 leading-loose text-lg px-3 border-blue-500 border-2 rounded-md"
149121
name="password"
150122
type="password"
151123
autoComplete="current-password"
@@ -156,19 +128,25 @@ export default function LoginPage() {
156128
/>
157129
</label>
158130
{actionData?.errors?.password && (
159-
<Alert style={{ color: "red", paddingTop: 4 }} id="password-error">
131+
<Alert className="text-red-700 pt-1" id="password-error">
160132
{actionData.errors.password}
161133
</Alert>
162134
)}
163135
</div>
164-
<div style={{ textAlign: "right" }}>
165-
<button type="submit">Sign in</button>
136+
<div className="text-right">
137+
<button
138+
type="submit"
139+
className="bg-blue-700 text-blue-100 hover:bg-blue-900 focus:bg-blue-900 rounded-sm py-2 px-4"
140+
>
141+
Sign in
142+
</button>
166143
</div>
167144
</Form>
168145

169-
<div style={{ paddingTop: 24, textAlign: "right" }}>
146+
<div className="text-right pt-6">
170147
Don't have an account?{" "}
171148
<Link
149+
className="text-blue-500 underline"
172150
to={{
173151
pathname: "/join",
174152
search: redirectTo ? `?redirectTo=${redirectTo}` : undefined,

‎app/routes/notes.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,36 +20,39 @@ export default function NotesPage() {
2020
const user = useUser();
2121

2222
return (
23-
<div>
24-
<header
25-
style={{
26-
display: "flex",
27-
justifyContent: "space-between",
28-
alignItems: "center",
29-
}}
30-
>
31-
<h1>Your Notes</h1>
23+
<div className="mx-4 my-8">
24+
<header className="flex justify-between items-center">
25+
<h1 className="text-3xl text-white">Your Notes</h1>
3226
<Form action="/logout" method="post">
33-
<button type="submit">Logout of {user.email}</button>
27+
<button
28+
type="submit"
29+
className="bg-blue-700 text-blue-100 hover:bg-blue-900 focus:bg-blue-900 rounded-sm py-2 px-4"
30+
>
31+
Logout of {user.email}
32+
</button>
3433
</Form>
3534
</header>
36-
<main style={{ display: "flex", gap: 24 }}>
37-
<div style={{ maxWidth: 240, minWidth: 120, width: "24vw" }}>
35+
<main className="mt-8 py-8 px-6 bg-white rounded-lg flex flex-col md:flex-row gap-6 min-h-[50vh]">
36+
<div className="md:max-w-[240px] md:min-w-[120px] md:w-[24vw]">
37+
<Link to="new" className="text-blue-500 underline">
38+
Create new note
39+
</Link>
40+
<hr className="my-4" />
3841
{data.noteListItems.length === 0 ? (
3942
<p>No notes yet</p>
4043
) : (
41-
<ul style={{ paddingLeft: 0 }}>
44+
<ol className="list-decimal list-inside">
4245
{data.noteListItems.map((note) => (
4346
<li key={note.id}>
44-
<Link to={note.id}>{note.title}</Link>
47+
<Link to={note.id} className="text-blue-500 underline">
48+
{note.title}
49+
</Link>
4550
</li>
4651
))}
47-
</ul>
52+
</ol>
4853
)}
49-
<hr />
50-
<Link to="new">Create new note</Link>
5154
</div>
52-
<div style={{ flex: 1 }}>
55+
<div className="flex-1">
5356
<Outlet />
5457
</div>
5558
</main>

0 commit comments

Comments
 (0)