├── public ├── favicon.ico ├── image │ ├── demo.png │ └── logo.svg └── vercel.svg ├── styles └── globals.css ├── pages ├── api │ └── hello.js ├── _app.js └── index.js ├── postcss.config.js ├── tailwind.config.js ├── package.json ├── .gitignore └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingwithdidem/kanban_tailwind/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/image/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingwithdidem/kanban_tailwind/HEAD/public/image/demo.png -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function helloAPI(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // If you want to use other PostCSS plugins, see the following: 2 | // https://tailwindcss.com/docs/using-with-preprocessors 3 | module.exports = { 4 | plugins: { 5 | '@tailwindcss/jit': {}, 6 | autoprefixer: {}, 7 | }, 8 | } 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import "../styles/globals.css"; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ( 6 |
7 | 8 | Kanban With Tailwindcss 9 | 10 | 11 | 12 |
13 | ); 14 | } 15 | 16 | export default MyApp; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-tailwindcss", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "next": "latest", 12 | "react": "^17.0.1", 13 | "react-dom": "^17.0.1" 14 | }, 15 | "devDependencies": { 16 | "@tailwindcss/jit": "^0.1.3", 17 | "autoprefixer": "^10.0.4", 18 | "postcss": "^8.1.10", 19 | "tailwindcss": "^2.0.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TaskManager App ( Next.js + Tailwind CSS ) 2 | 3 | TaskManager UI implemented using Nextjs and TailwindCSS. 4 | This repo uses `with-tailwindcss` template to set up Nextjs & Tailwindcss example project. 5 | 6 | It uses the new [`@tailwindcss/jit`](https://github.com/tailwindlabs/tailwindcss-jit) engine for Tailwind CSS. 7 | 8 | ## Youtube Video 9 | 10 | [Youtube][youtube] 11 | 12 | ## Demo 13 | 14 | [Demo App](https://romantic-elion-06f266.netlify.app/) 15 | 16 | ## ScreenShot 17 | 18 | ![Demo App][demoapp] 19 | 20 | [demoapp]: public/image/demo.png 21 | [youtube]: https://www.youtube.com/watch?v=uYBO5B4Wt38 22 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /public/image/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 10 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | 4 | export default function Home() { 5 | const [isOpen, toggleSidebar] = React.useState(false); 6 | return ( 7 |
8 |
15 |
16 | Logo 17 | 36 |
37 | 115 |
116 | 117 |
118 |
119 |
120 |
121 | {/* Searchbar */} 122 |
123 | 142 |
143 | 144 | 151 | 157 | 158 | 159 | 163 |
164 |
165 | 166 | {/* Icons */} 167 |
168 | 183 | 190 |
191 |
192 | 193 | {/* Header Bottom */} 194 |
195 |
196 |

Assignees

197 |
198 | 199 | Avatar 204 | 205 | 206 | Avatar 211 | 212 | 213 | Avatar 218 | 219 | 220 | Avatar 225 | 226 |
227 |
228 | 229 |
230 | 233 | 251 |
252 |
253 |
254 |
255 | 256 |
257 |
258 |
259 |

260 | Todo 261 |

262 | 389 |
390 | 391 | {/* Board In Progress */} 392 |
393 |

394 | In Progress 395 |

396 |
397 | 580 |
581 |
582 | 583 | {/* Board Testing */} 584 |
585 |

586 | Testing 587 |

588 |
589 | 895 |
896 |
897 | 898 | {/* Board Done */} 899 |
900 |

901 | Done 902 |

903 | 1029 |
1030 |
1031 |
1032 |
1033 |
1034 | ); 1035 | } 1036 | --------------------------------------------------------------------------------