{"id":18932653,"url":"https://github.com/yougotwill/nextjs-typescript-tailwind-starter","last_synced_at":"2025-08-17T01:33:47.478Z","repository":{"id":106185517,"uuid":"383425713","full_name":"yougotwill/nextjs-typescript-tailwind-starter","owner":"yougotwill","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-16T10:05:19.000Z","size":372,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-25T04:37:13.559Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/yougotwill.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":"2021-07-06T10:15:19.000Z","updated_at":"2021-10-27T23:04:47.000Z","dependencies_parsed_at":"2023-06-16T01:30:33.840Z","dependency_job_id":null,"html_url":"https://github.com/yougotwill/nextjs-typescript-tailwind-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yougotwill/nextjs-typescript-tailwind-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yougotwill%2Fnextjs-typescript-tailwind-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yougotwill%2Fnextjs-typescript-tailwind-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yougotwill%2Fnextjs-typescript-tailwind-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yougotwill%2Fnextjs-typescript-tailwind-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yougotwill","download_url":"https://codeload.github.com/yougotwill/nextjs-typescript-tailwind-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yougotwill%2Fnextjs-typescript-tailwind-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270796217,"owners_count":24647319,"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","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-08T11:50:04.610Z","updated_at":"2025-08-17T01:33:47.454Z","avatar_url":"https://github.com/yougotwill.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NEXTJS TYPESCRIPT TAILWIND STARTER TEMPLATE\n\nThis project is built with [Next.js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) \u0026 [TypeScript](https://www.typescriptlang.org/).\n\n## Features\n\n- Responsive Javascript\n- Custom 404 page\n- Security Headers\n- Tailwind stylesheet minification and optimisation.\n- Template for optimal metadata (Lighthouse SEO score = 100)\n- Automatic sitemap\n- Staging environment support\n- Accessbility linting\n- First class Visual Studio Code integration\n\n## Getting Started\n\nFirst, install the required packages:\n\n```bash\nnpm run install\n# or\nyarn install\n```\n\nSecond, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Development\n\n- **Always** run `yarn run build \u0026\u0026 yarn run start` to see how the code works in a production environment before committing.\n\n- For staging environments use `build:staging` and `start:staging`.\n\n  - This updates the system environment variables and page metadata.\n\n- The [axe-react](https://github.com/dequelabs/axe-core-npm/blob/develop/packages/react/README.md) plugin is used for accessbility testing.\n\n- Uses [Headwind](https://github.com/heybourn/headwind) VSCode extension for sorting Tailwind classes.\n\n- Uses [classnames](https://www.npmjs.com/package/classnames) to organise our classes into groups that combine at build time.\n\n### Committing changes\n\nBefore a commit is accepted the staged changes will be formatted using [prettier](https://prettier.io/) and linted using [eslint](https://eslint.org/). The commit will be reverted if files are formatted or lint errors are returned.\n\n#### Commit Message Convention\n\nThis project follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)\n\nCommit messages will be checked using [husky](https://typicode.github.io/husky/#/) and [commitlint](https://commitlint.js.org/).\n\n### TailwindCSS\n\n#### Class organisation\n\nThis helps with readability and is encouraged. Consider it to be a guideline and not a set of rules.\n\n##### React\n\n```jsx\n  \u003cdiv className={classNames(\n    \"general classes here - colors, fonts, padding, margin etc\",\n    \"each responsive class utility should have it's own string md: lg: etc.\"\n    \"placeholder classes\",\n    \"animations, transforms, effect\",\n    \"pseudo classes i.e hover, focus, active, etc.\",\n    \"toggling classes i.e. NavMenu isExpanded\"\n  )}\u003e\u003c/div\u003e\n```\n\n##### Custom CSS classes\n\nAny custom CSS classes should be written in [globals.css](styles/globals.css).\n\n```css\n.custom-class {\n  @apply general classes here - colors, fonts, padding, margin;\n  @apply group breakpointed classes into their own strings;\n  @apply placeholder classes;\n  @apply animations, transforms, effect;\n  @apply pseudo classes i.e hover, focus, active;\n}\n```\n\n#### Notes\n\n- We can't use template literals with classes if we want to purge the CSS.\n  - https://github.com/tailwindlabs/tailwindcss/issues/2209#issuecomment-677855297\n  - https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html\n  - Avoid: `hover:bg-black hover:text-${bgColor}`\n  - Do: `const hoverClasses = [backgroundColor === 'black' \u0026\u0026 'bg-black hover:text-black'];`\n\n## Deployment\n\n1. Once you have a domain replace all instances of `YOUR_DOMAIN_HERE` in this project.\n2. Edit [constants/metadata.ts](constants/metadata.ts) with your project info for accurate metadata and effective SEO.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyougotwill%2Fnextjs-typescript-tailwind-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyougotwill%2Fnextjs-typescript-tailwind-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyougotwill%2Fnextjs-typescript-tailwind-starter/lists"}