Skip to content

Commit 8aa1555

Browse files
vuongddangvuongddang
committed
Integrate TailwindCSS and clean up index.tsx
1 parent 24d7b43 commit 8aa1555

File tree

8 files changed

+456
-203
lines changed

8 files changed

+456
-203
lines changed

‎package-lock.json

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

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
"devDependencies": {
1616
"@types/node": "^14.0.23",
1717
"@types/react": "^16.9.43",
18+
"autoprefixer": "^9.8.5",
19+
"postcss-import": "^12.0.1",
20+
"tailwindcss": "^1.5.1",
1821
"typescript": "^3.9.7"
1922
}
2023
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: [
3+
'tailwindcss',
4+
'autoprefixer',
5+
]
6+
}

‎public/vercel.svg

-4
This file was deleted.

‎src/pages/_app.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {AppProps} from 'next/app'
2+
import '../styles/index.css'
3+
4+
function MyApp({ Component, pageProps }: AppProps) {
5+
return <Component {...pageProps} />
6+
}
7+
8+
export default MyApp

‎src/pages/index.tsx

+3-199
Original file line numberDiff line numberDiff line change
@@ -2,208 +2,12 @@ import Head from 'next/head'
22

33
export default function Home() {
44
return (
5-
<div className="container">
6-
<Head>
7-
<title>Create Next App</title>
8-
<link rel="icon" href="/favicon.ico" />
9-
</Head>
10-
5+
<div className="container flex items-center p-4 mx-auto min-h-screen justify-center">
116
<main>
12-
<h1 className="title">
13-
Welcome to <a href="https://nextjs.org">Next.js!</a>
7+
<h1 className="font-mono text-xl code">
8+
Welcome to <span className="text-purple-700">Nextjs</span>, <span className="text-indigo-700">TailwindCSS</span> and <span className="text-gray-700">TypeScript</span>
149
</h1>
15-
16-
<p className="description">
17-
Get started by editing <code>pages/index.js</code>
18-
</p>
19-
20-
<div className="grid">
21-
<a href="https://nextjs.org/docs" className="card">
22-
<h3>Documentation &rarr;</h3>
23-
<p>Find in-depth information about Next.js features and API.</p>
24-
</a>
25-
26-
<a href="https://nextjs.org/learn" className="card">
27-
<h3>Learn &rarr;</h3>
28-
<p>Learn about Next.js in an interactive course with quizzes!</p>
29-
</a>
30-
31-
<a
32-
href="https://github.com/vercel/next.js/tree/master/examples"
33-
className="card"
34-
>
35-
<h3>Examples &rarr;</h3>
36-
<p>Discover and deploy boilerplate example Next.js projects.</p>
37-
</a>
38-
39-
<a
40-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
41-
className="card"
42-
>
43-
<h3>Deploy &rarr;</h3>
44-
<p>
45-
Instantly deploy your Next.js site to a public URL with Vercel.
46-
</p>
47-
</a>
48-
</div>
4910
</main>
50-
51-
<footer>
52-
<a
53-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
>
57-
Powered by{' '}
58-
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
59-
</a>
60-
</footer>
61-
62-
<style jsx>{`
63-
.container {
64-
min-height: 100vh;
65-
padding: 0 0.5rem;
66-
display: flex;
67-
flex-direction: column;
68-
justify-content: center;
69-
align-items: center;
70-
}
71-
72-
main {
73-
padding: 5rem 0;
74-
flex: 1;
75-
display: flex;
76-
flex-direction: column;
77-
justify-content: center;
78-
align-items: center;
79-
}
80-
81-
footer {
82-
width: 100%;
83-
height: 100px;
84-
border-top: 1px solid #eaeaea;
85-
display: flex;
86-
justify-content: center;
87-
align-items: center;
88-
}
89-
90-
footer img {
91-
margin-left: 0.5rem;
92-
}
93-
94-
footer a {
95-
display: flex;
96-
justify-content: center;
97-
align-items: center;
98-
}
99-
100-
a {
101-
color: inherit;
102-
text-decoration: none;
103-
}
104-
105-
.title a {
106-
color: #0070f3;
107-
text-decoration: none;
108-
}
109-
110-
.title a:hover,
111-
.title a:focus,
112-
.title a:active {
113-
text-decoration: underline;
114-
}
115-
116-
.title {
117-
margin: 0;
118-
line-height: 1.15;
119-
font-size: 4rem;
120-
}
121-
122-
.title,
123-
.description {
124-
text-align: center;
125-
}
126-
127-
.description {
128-
line-height: 1.5;
129-
font-size: 1.5rem;
130-
}
131-
132-
code {
133-
background: #fafafa;
134-
border-radius: 5px;
135-
padding: 0.75rem;
136-
font-size: 1.1rem;
137-
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
138-
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
139-
}
140-
141-
.grid {
142-
display: flex;
143-
align-items: center;
144-
justify-content: center;
145-
flex-wrap: wrap;
146-
147-
max-width: 800px;
148-
margin-top: 3rem;
149-
}
150-
151-
.card {
152-
margin: 1rem;
153-
flex-basis: 45%;
154-
padding: 1.5rem;
155-
text-align: left;
156-
color: inherit;
157-
text-decoration: none;
158-
border: 1px solid #eaeaea;
159-
border-radius: 10px;
160-
transition: color 0.15s ease, border-color 0.15s ease;
161-
}
162-
163-
.card:hover,
164-
.card:focus,
165-
.card:active {
166-
color: #0070f3;
167-
border-color: #0070f3;
168-
}
169-
170-
.card h3 {
171-
margin: 0 0 1rem 0;
172-
font-size: 1.5rem;
173-
}
174-
175-
.card p {
176-
margin: 0;
177-
font-size: 1.25rem;
178-
line-height: 1.5;
179-
}
180-
181-
.logo {
182-
height: 1em;
183-
}
184-
185-
@media (max-width: 600px) {
186-
.grid {
187-
width: 100%;
188-
flex-direction: column;
189-
}
190-
}
191-
`}</style>
192-
193-
<style jsx global>{`
194-
html,
195-
body {
196-
padding: 0;
197-
margin: 0;
198-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
199-
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
200-
sans-serif;
201-
}
202-
203-
* {
204-
box-sizing: border-box;
205-
}
206-
`}</style>
20711
</div>
20812
)
20913
}

‎src/styles/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* purgecss start ignore */
2+
@import 'tailwindcss/base';
3+
@import 'tailwindcss/components';
4+
5+
/* Your own custom component styles */
6+
7+
/* purgecss end ignore */
8+
@import 'tailwindcss/utilities';

‎tailwind.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
purge: ['./src/components/**/*.{ts,tsx,js,jsx}', './src/pages/**/*.{ts,tsx,js,jsx}'],
3+
theme: {
4+
extend: {},
5+
},
6+
variants: {},
7+
plugins: [],
8+
}

0 commit comments

Comments
 (0)