{"id":21151719,"url":"https://github.com/ashirbadgudu/nextjs-admin-panel-typescript","last_synced_at":"2026-03-16T07:33:27.134Z","repository":{"id":172444104,"uuid":"492127094","full_name":"AshirbadGudu/nextjs-admin-panel-typescript","owner":"AshirbadGudu","description":"A NEXTjs admin panel stater kit powered with mui, tailwind and context api","archived":false,"fork":false,"pushed_at":"2023-02-21T09:47:12.000Z","size":547,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T02:51:19.056Z","etag":null,"topics":["admin-panel","context-api","firebase","hacktoberfest","hacktoberfest2022","mui","nextjs","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AshirbadGudu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-14T06:01:47.000Z","updated_at":"2024-01-30T15:03:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"3d8d705b-47c9-40dc-a198-cd792e2086cb","html_url":"https://github.com/AshirbadGudu/nextjs-admin-panel-typescript","commit_stats":null,"previous_names":["ashirbadgudu/nextjs-admin-panel-typescript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AshirbadGudu%2Fnextjs-admin-panel-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AshirbadGudu%2Fnextjs-admin-panel-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AshirbadGudu%2Fnextjs-admin-panel-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AshirbadGudu%2Fnextjs-admin-panel-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AshirbadGudu","download_url":"https://codeload.github.com/AshirbadGudu/nextjs-admin-panel-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710401,"owners_count":21149185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-panel","context-api","firebase","hacktoberfest","hacktoberfest2022","mui","nextjs","react","tailwindcss","typescript"],"created_at":"2024-11-20T10:18:25.253Z","updated_at":"2026-03-16T07:33:27.094Z","avatar_url":"https://github.com/AshirbadGudu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Set Up Tailwind Css With NextJS and TypeScript\n\n## Steps for creating `nextjs-typescript-tailwind-css-stater`\n\n### Create a new nextjs project with stater template\n\n```sh\nnpx create-next-app -e with-tailwindcss [your-project-name]\n```\n\n### Move all the code into src folder\n\n```sh\nmkdir src\nmv pages src\nmv styles src\n```\n\n### Add absolute import by adding following line into `tsconfig.json` file\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### Change `tailwind.config.js` file for new project structure\n\n```js\nmodule.exports = {\n  content: [\n    './src/pages/**/*.{js,ts,jsx,tsx}', // change this\n    './src/components/**/*.{js,ts,jsx,tsx}', // change this\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n  darkMode: 'class', // change this\n}\n```\n\n### Create a basic folder structure for your project\n\n```sh\nmkdir -p src/{assets,components,configs,contexts,hooks,types,utils}\ncd src\ntouch assets/index.ts components/index.ts configs/index.ts contexts/index.ts hooks/index.ts types/index.ts utils/index.ts\n```\n\n### Change the default port for nextjs by changing the dev script in `package.json` file\n\n```json\n{\n  \"dev\": \"next dev -p 3022\"\n}\n```\n\n### Extend more colors by adding following into `tailwind.config.js` file\n\n```js\nmodule.exports = {\n  content: [\n    './src/pages/**/*.{js,ts,jsx,tsx}',\n    './src/components/**/*.{js,ts,jsx,tsx}',\n  ],\n  theme: {\n    extend: {\n      colors: {\n        facebook: '#3b5999',\n        twitter: '#55acee',\n        linkedin: '#0077b5',\n        instagram: '#e4405f',\n        whatsapp: '#25d366',\n        youtube: '#cd201f',\n      },\n    },\n  },\n  plugins: [],\n  darkMode: 'class',\n}\n```\n\n### Install MUI related dependencies\n\n```sh\nyarn add @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material @mui/x-date-pickers @date-io/moment moment\n```\n\n### Install @material-table/core and exporter package\n\n```sh\nyarn add @material-table/core@next @material-table/exporters\n```\n\n### Install formik and yup for form validation\n\n```sh\nyarn add formik yup\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashirbadgudu%2Fnextjs-admin-panel-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashirbadgudu%2Fnextjs-admin-panel-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashirbadgudu%2Fnextjs-admin-panel-typescript/lists"}