Add tailwindcss and next-images

rnatulsa · Feb 2, 2021 · ea9632d · ea9632d
1 parent 06f294b
commit ea9632d
Show file tree

Hide file tree

Showing 13 changed files with 550 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+/.tmp
diff --git a/README.md b/README.md
@@ -1,34 +1,3 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Renaissance Neighborhood Association
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Website for the Renaissance Neighborhood Association in Tulsa.
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,8 @@
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
 
-module.exports = {
+const withImages = require('next-images')
+
+module.exports = withImages({
   // https://nextjs.org/docs/api-reference/next.config.js/basepath
   basePath: process.env.BASE_PATH || '',
-}
+})
diff --git a/package.json b/package.json
@@ -8,8 +8,12 @@
     "start": "next start"
   },
   "dependencies": {
+    "autoprefixer": "^10.2.4",
     "next": "10.0.6",
+    "next-images": "^1.7.0",
+    "postcss": "^8.2.4",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "tailwindcss": "^2.0.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -0,0 +1,12 @@
+import logo from '@/images/logo.png'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <header>
+        <img src={logo} alt="Logo" />
+      </header>
+      {children}
+    </>
+  )
+}
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,4 +1,5 @@
-import '../styles/globals.css'
+import '@/styles/globals.css'
+// import 'tailwindcss/tailwind.css'
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,9 +1,10 @@
 import Head from 'next/head'
 import styles from '@/styles/Home.module.css'
+import Layout from '@/components/layout'
 
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <Layout>
       <Head>
         <title>Create Next App</title>
         <link rel="icon" href={`${process.env.BASE_PATH || ''}/favicon.ico`} />
@@ -60,6 +61,6 @@ export default function Home() {
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
-    </div>
+    </Layout>
   )
 }
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -1,11 +1,11 @@
-.container {
+/* .container {
   min-height: 100vh;
   padding: 0 0.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-}
+} */
 
 .main {
   padding: 5rem 0;

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,16 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['src/pages/**/*.{js,ts,jsx,tsx}', 'src/components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,3 +32,5 @@ yarn-error.log*

		# vercel
		.vercel

		/.tmp