Skip to content

Commit 7208c36

Browse files
author
Alex Patterson
committed
added tailwind
1 parent 628e4f2 commit 7208c36

File tree

9 files changed

+657
-299
lines changed

9 files changed

+657
-299
lines changed

‎nextjs/package-lock.json‎

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

‎nextjs/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,15 @@
2020
"sass": "^1.29.0"
2121
},
2222
"devDependencies": {
23+
"@fullhuman/postcss-purgecss": "^3.0.0",
2324
"@types/node": "^14.14.9",
2425
"@types/react": "^16.9.56",
2526
"@types/react-transition-group": "^4.4.0",
27+
"autoprefixer": "^10.0.2",
28+
"postcss": "^8.1.8",
29+
"tailwindcss": "^2.0.1",
30+
"tailwindcss-animatecss": "^1.0.7",
31+
"tailwindcss-transforms": "^2.2.0",
2632
"typescript": "^4.1.2"
2733
}
2834
}

‎nextjs/pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import classNames from "classnames";
33
import { CSSTransition } from "react-transition-group";
44
import Link from "next/link";
55

6-
import "../styles/styles.css";
76
import "../configureAmplify";
87
import "primereact/resources/themes/vela-purple/theme.css";
98
import "primereact/resources/primereact.min.css";
109
import "primeicons/primeicons.css";
1110
import "primeflex/primeflex.css";
1211
import "../layout/layout.scss";
12+
import "../styles/globals.css";
1313

1414
import { AppTopbar } from "../layout/AppTopbar";
1515
import { AppMenu } from "../layout/AppMenu";

‎nextjs/pages/index.tsx‎

Lines changed: 19 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,35 @@
11
import Head from "next/head";
2-
import styles from "../styles/Home.module.css";
32

43
export default function Home() {
54
return (
6-
<div className={styles.container}>
5+
<div>
76
<Head>
87
<title>Create Next App</title>
98
<link rel="icon" href="/favicon.ico" />
109
</Head>
1110

12-
<main className={styles.main}>
13-
<h1 className={styles.title}>
14-
Welcome to <a href="https://nextjs.org">Next.js!</a>
15-
</h1>
16-
17-
<p className={styles.description}>
18-
Get started by editing{" "}
19-
<code className={styles.code}>pages/index.js</code>
20-
</p>
21-
22-
<div className={styles.grid}>
23-
<a href="https://nextjs.org/docs" className={styles.card}>
24-
<h3>Documentation &rarr;</h3>
25-
<p>Find in-depth information about Next.js features and API.</p>
26-
</a>
27-
28-
<a href="https://nextjs.org/learn" className={styles.card}>
29-
<h3>Learn &rarr;</h3>
30-
<p>Learn about Next.js in an interactive course with quizzes!</p>
31-
</a>
32-
33-
<a
34-
href="https://github.com/vercel/next.js/tree/master/examples"
35-
className={styles.card}
36-
>
37-
<h3>Examples &rarr;</h3>
38-
<p>Discover and deploy boilerplate example Next.js projects.</p>
39-
</a>
40-
41-
<a
42-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
43-
className={styles.card}
44-
>
45-
<h3>Deploy &rarr;</h3>
46-
<p>
47-
Instantly deploy your Next.js site to a public URL with Vercel.
11+
<main>
12+
<div className="bg-white shadow p-3 rounded lg:w-64">
13+
<div>
14+
<div className="bg-cover bg-center bg-gray-300 h-32 rounded"></div>
15+
</div>
16+
<div className="mt-6">
17+
<p className="text-lg text-bold tracking-wide text-gray-600 mb-2">
18+
Title
19+
</p>
20+
<p className="text-sm text-gray-600 font-hairline">
21+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4822
</p>
49-
</a>
23+
</div>
24+
<div className="mt-6">
25+
<button className="rounded shadow-md flex items-center shadow bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
26+
Default
27+
</button>
28+
</div>
5029
</div>
5130
</main>
5231

53-
<footer className={styles.footer}></footer>
32+
<footer></footer>
5433
</div>
5534
);
5635
}

‎nextjs/postcss.config.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
plugins: [
3+
"tailwindcss",
4+
[
5+
"@fullhuman/postcss-purgecss",
6+
process.env.NODE_ENV === "production"
7+
? {
8+
// the paths to all template files
9+
content: [
10+
"./pages/**/*.{js,jsx,ts,tsx}",
11+
"./components/**/*.{js,jsx,ts,tsx}",
12+
],
13+
// function used to extract class names from the templates
14+
defaultExtractor: (content) =>
15+
content.match(/[\w-/:]+(?<!:)/g) || [],
16+
}
17+
: false,
18+
],
19+
],
20+
};

‎nextjs/styles/Home.module.css‎

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎nextjs/styles/globals.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* purgecss start ignore */
2+
@tailwind base;
3+
@tailwind components;
4+
/* purgecss end ignore */
5+
@tailwind utilities;

‎nextjs/styles/styles.css‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

0 commit comments

Comments
 (0)