Skip to content

Commit

Permalink
chore: add tailwind ✨
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonappah committed Nov 22, 2021
1 parent 554f01f commit c25b775
Show file tree
Hide file tree
Showing 6 changed files with 532 additions and 84 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,12 @@
},
"devDependencies": {
"@types/react": "^17.0.30",
"autoprefixer": "^10.4.0",
"eslint": "7",
"eslint-config-next": "11.1.2",
"postcss": "^8.3.11",
"prettier": "^2.4.1",
"tailwindcss": "^2.2.19",
"typescript": "^4.4.4"
}
}
3 changes: 1 addition & 2 deletions pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import "../styles/globals.css"

import 'tailwindcss/tailwind.css'
function MyApp({Component, pageProps}) {
return <Component {...pageProps} />
}
Expand Down
71 changes: 4 additions & 67 deletions pages/index.js
Original file line number Diff line number Diff line change
@@ -1,75 +1,12 @@
import Head from "next/head"
import Image from "next/image"
import styles from "../styles/Home.module.css"

export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>

<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>

<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>pages/index.js</code>
</p>

<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>

<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>

<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with
Vercel.
</p>
</a>
</div>
</main>

<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{" "}
<span className={styles.logo}>
<Image
src="/vercel.svg"
alt="Vercel Logo"
width={72}
height={16}
/>
</span>
</a>
</footer>
<div>
<p className="bg-red-300">
hi
</p>
</div>
)
}
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
11 changes: 11 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Loading

1 comment on commit c25b775

@vercel
Copy link

@vercel vercel bot commented on c25b775 Nov 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.