Add tailwind & prettier

.gitignore

@@ -30,6 +30,18 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
+# generated
+/public/precache.*.*.js
+/public/sw.js
+/public/workbox-*.js
+/public/worker-*.js
+/public/fallback-*.js
+/public/precache.*.*.js.map
+/public/sw.js.map
+/public/workbox-*.js.map
+/public/worker-*.js.map
+/public/fallback-*.js
+
 # vercel
 .vercel
 

package.json

@@ -1,9 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 4000",
     "build": "next build",
-    "start": "next start"
+    "start": "next start -p 4000"
   },
   "dependencies": {
     "next": "latest",
@@ -14,6 +14,10 @@
   "devDependencies": {
     "@types/node": "17.0.4",
     "@types/react": "17.0.38",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
+    "tailwindcss": "^3.1.6",
     "typescript": "4.5.4"
   }
 }

pages/index.tsx

@@ -1,10 +1,8 @@
-import styles from "../styles/Home.module.css";
-
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <div className="">
-      <main className={styles.main}>
+      <main className="">
-        <div className={styles.grid}>Привет мир!</div>
+        <div className="">Привет мир!</div>
       </main>
     </div>
   );

postcss.config.js

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

styles/globals.css

@@ -1,16 +1,3 @@
-html,
+@tailwind base
-body {
+@tailwind components
-  padding: 0;
+@tailwind utilities;
-  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.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};