setup tailwind, add counter page

evgenyantipin · evgenyantipin · commit 1185a405e61e · 2022-10-14T23:26:35.000+03:00
diff --git a/next.config.js b/next.config.js
@@ -1,13 +1,17 @@
 module.exports = {
+  experimental: {
+    legacyBrowsers: false,
+    browsersListForSwc: true
+  },
   webpack: (config, { dev, isServer }) => {
     if (!dev && !isServer) {
       Object.assign(config.resolve.alias, {
-        react: "preact/compat",
-        "react-dom/test-utils": "preact/test-utils",
-        "react-dom": "preact/compat",
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat'
       });
     }
 
     return config;
-  },
+  }
 };
diff --git a/package.json b/package.json
@@ -44,12 +44,15 @@
     "@types/redux": "^3.6.0",
     "@types/redux-logger": "^3.0.9",
     "@types/redux-thunk": "^2.1.0",
+    "autoprefixer": "^10.4.12",
     "eslint": "^8.25.0",
     "eslint-config-next": "^12.3.1",
     "husky": "^4.2.5",
     "lint-staged": "10.2.13",
+    "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "redux-logger": "^3.0.6",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.8.4"
   },
   "engines": {
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AppProps } from 'next/app';
 import { Provider } from 'react-redux';
 import { store } from 'store';
-import 'styles.global.scss';
+import 'styles.global.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,29 +1,19 @@
-import React from 'react'
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import { Html, Head, Main, NextScript } from 'next/document';
 
-class MyDocument extends Document {
-  render() {
-    return (
-      <Html>
-        <Head>
-          <link
-            rel="stylesheet"
-            type="text/css"
-            href="https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css"
-          />
-          <link
-            rel="stylesheet"
-            type="text/css"
-            href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.7.4/tachyons.min.css"
-          />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.7.4/tachyons.min.css"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/pages/counter.tsx b/pages/counter.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import type { NextPage } from 'next';
+import { useSelector, useDispatch } from 'react-redux';
+import Layout from 'layouts/Main';
+import { decrement, increment } from 'store/reducers/counter';
+import type { RootState } from 'store';
+
+const CounterPage: NextPage = () => {
+  const dispatch = useDispatch();
+  const count = useSelector((state: RootState) => state.counter.value);
+
+  return (
+    <Layout>
+      <div className="flex">
+        <button
+          className="pointer-events-auto ml-8 rounded-md bg-indigo-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-indigo-500"
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          Increment
+        </button>
+        <span className="pointer-events-auto ml-8 rounded-md py-2 px-3 font-semibold leading-5 text-black">{count}</span>
+        <button
+          className="pointer-events-auto ml-8 rounded-md bg-indigo-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-indigo-500"
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          Decrement
+        </button>
+      </div>
+    </Layout>
+  );
+};
+
+export default CounterPage;
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
@@ -2,22 +2,31 @@ import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import nextLogo from 'assets/nextjs.svg';
-import styles from './Nav.module.scss';
+import s from './styles.module.scss';
 
 const Nav: React.FC = () => (
-  <div className={styles.nav}>
+  <div className={s.nav}>
     <Link href="/">
       <a>
         <Image src={nextLogo} alt="nextjs" width="100" height="40" />
       </a>
     </Link>
+    <Link href="/counter">
+      <a className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all">
+        Counter
+      </a>
+    </Link>
     |
     <Link href="/about">
-      <a>About</a>
-    </Link>{' '}
+      <a className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all">
+        About
+      </a>
+    </Link>
     |
     <Link href="/contact">
-      <a>Contact</a>
+      <a className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all">
+        Contact
+      </a>
     </Link>
   </div>
 );
diff --git a/src/components/Nav/styles.module.scss b/src/components/Nav/styles.module.scss
@@ -3,16 +3,12 @@
   border-bottom: 1px solid #ddd;
   display: flex;
   align-items: center;
-  background: var(--purple);
+  background: palegreen;
   img {
     display: block;
     height: 50px;
     width: 82px;
   }
-  a {
-    padding: 0 15px;
-    color: #fff;
-  }
   p {
     font-size: 1.2rem;
     line-height: 35px;
diff --git a/src/layouts/Main.module.scss b/src/layouts/Main.module.scss
diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
 import Nav from 'components/Nav';
-import styles from './Main.module.scss';
+import s from './styles.module.scss';
 
 interface IProps {
   children: React.ReactNode;
@@ -12,17 +12,15 @@ const MainLayout: React.FC<IProps> = ({
   children,
   title = 'default title'
 }) => (
-  <div className={styles.layout}>
+  <div className={s.layout}>
     <Head>
       <title>{title}</title>
     </Head>
     <header>
       <Nav />
     </header>
-
-    <main>{children}</main>
-
-    <div className={styles.footer}>Footer</div>
+    <main className="mt-10">{children}</main>
+    <div className="flex flex-col justify-center px-8 bg-gray-2000">Footer</div>
   </div>
 );
 
diff --git a/src/layouts/styles.module.scss b/src/layouts/styles.module.scss
@@ -0,0 +1,12 @@
+.layout {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  max-width: 42rem;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.layout > main {
+  flex: 1;
+}
diff --git a/src/store/index.tsx b/src/store/index.tsx
@@ -2,21 +2,21 @@ import thunkMiddleware from 'redux-thunk';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { createLogger } from 'redux-logger';
 import postsReducer from './reducers/posts';
+import counterReducer from './reducers/counter';
 
 const loggerMiddleware = createLogger({
   collapsed: false
 });
 
 const rootReducer = combineReducers({
-  posts: postsReducer
+  posts: postsReducer,
+  counter: counterReducer
 });
 
 export const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({
-      serializableCheck: false
-    }).concat(loggerMiddleware, thunkMiddleware)
+    getDefaultMiddleware().concat(loggerMiddleware, thunkMiddleware)
 });
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
diff --git a/src/store/reducers/counter.ts b/src/store/reducers/counter.ts
@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+  value: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
diff --git a/src/styles.global.css b/src/styles.global.css
@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#__next {
+  @apply bg-gray-50 dark:bg-gray-900;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
diff --git a/src/styles.global.scss b/src/styles.global.scss
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    'src/components/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};
diff --git a/yarn.lock b/yarn.lock
