Add Tailwind

lesesalen · Nov 15, 2021 · b16de36 · b16de36
1 parent e2bae73
commit b16de36
Show file tree

Hide file tree

Showing 8 changed files with 521 additions and 163 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,11 @@
   "devDependencies": {
     "@types/node": "16.11.7",
     "@types/react": "17.0.34",
+    "autoprefixer": "10.4.0",
     "eslint": "7",
     "eslint-config-next": "12.0.3",
+    "postcss": "8.3.11",
+    "tailwindcss": "2.2.19",
     "typescript": "4.4.4"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import '../styles/globals.css'
+import 'tailwindcss/tailwind.css'
 import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,49 +1,46 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
-import styles from '../styles/Home.module.css'
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <div>
       <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}>
+      <main>
+        <h1>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
         </h1>
 
-        <p className={styles.description}>
+        <p>
           Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
+          <code>pages/index.tsx</code>
         </p>
 
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
+        <div>
+          <a href="https://nextjs.org/docs">
             <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}>
+          <a href="https://nextjs.org/learn" >
             <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>
@@ -53,14 +50,14 @@ const Home: NextPage = () => {
         </div>
       </main>
 
-      <footer className={styles.footer}>
+      <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}>
+          <span>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
diff --git a/styles/globals.css b/styles/globals.css
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}