Setup Tailwind CSS

package.json

@@ -22,8 +22,11 @@
   "homepage": "https://github.com/yudemoe/yude.jp#readme",
   "dependencies": {
     "@zeit/next-css": "^1.0.1",
+    "autoprefixer": "^10.2.4",
     "next": "^10.0.6",
+    "postcss": "^8.2.4",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "tailwindcss": "^2.0.2"
   }
 }

pages/components/Layout.js

@@ -1,5 +1,6 @@
 import Head from "next/head"
 import Link from "next/link"
+import "tailwindcss/tailwind.css";
 
 const Layout = (props) => {
   const { title, children } = props
@@ -18,14 +19,10 @@ const Layout = (props) => {
           {children}
         </div>
       </main>
-      
       <style jsx global>{`
         body {
             text-align: center;
         }
-        .avatar{
-            border-radius: 50%;
-        }
       `}</style>
     </div>
   )

pages/index.js

@@ -5,8 +5,8 @@ import Image from 'next/image'
 const Index = () => (
 
     <Layout title="ホーム">
-      <div>
+      <div className="my-9">
-        <Image className="avatar"
+        <Image className="rounded-full"
             src         = "/static/images/avatar.png"
             alt         = "yude's avatar"
             width       = {200}
@@ -17,8 +17,8 @@ const Index = () => (
         <p>For now, please visit <Link href="https://yude.moe"><a>yude.moe</a></Link>.
         </p>
       </div>
+      
     </Layout>
-    
   )
   
 export default Index

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -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: [],
+}