{"id":16065163,"url":"https://github.com/se-gl/nextjs-boilerplate-tailwind","last_synced_at":"2026-04-11T01:41:25.418Z","repository":{"id":162986480,"uuid":"638227753","full_name":"Se-Gl/nextjs-boilerplate-tailwind","owner":"Se-Gl","description":"NextJS boilerplate with SCSS, tailwindcss, cypress, pre-commits and github actions","archived":false,"fork":false,"pushed_at":"2023-05-12T19:57:03.000Z","size":454,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T20:33:35.930Z","etag":null,"topics":["boilerplate","cypress","nextjs","pre-commit","scss","tailwindcss"],"latest_commit_sha":null,"homepage":"https://main.du04a5c71tx2m.amplifyapp.com","language":"JavaScript","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/Se-Gl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/contributing.md","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":"2023-05-09T10:51:38.000Z","updated_at":"2023-05-12T19:58:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"a53a94aa-d17d-4683-a6cb-249dddcf7f80","html_url":"https://github.com/Se-Gl/nextjs-boilerplate-tailwind","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.25,"last_synced_commit":"3f0bde63d10e892bd40369781aa3542afcda5a52"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Se-Gl%2Fnextjs-boilerplate-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Se-Gl%2Fnextjs-boilerplate-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Se-Gl%2Fnextjs-boilerplate-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Se-Gl%2Fnextjs-boilerplate-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Se-Gl","download_url":"https://codeload.github.com/Se-Gl/nextjs-boilerplate-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318749,"owners_count":20919484,"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":["boilerplate","cypress","nextjs","pre-commit","scss","tailwindcss"],"created_at":"2024-10-09T05:11:38.202Z","updated_at":"2026-04-11T01:41:19.039Z","avatar_url":"https://github.com/Se-Gl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs boilerplate with tailwindcss\n\n[![Styling](https://github.com/Se-Gl/nextjs-boilerplate-tailwind/actions/workflows/style.yml/badge.svg)](https://github.com/Se-Gl/nextjs-boilerplate-tailwind/actions/workflows/style.yml)\n[![Cypress Base](https://github.com/Se-Gl/nextjs-boilerplate-tailwind/actions/workflows/cypress.yml/badge.svg)](https://github.com/Se-Gl/nextjs-boilerplate-tailwind/actions/workflows/cypress.yml)\n[![Release](https://github.com/Se-Gl/nextjs-boilerplate-tailwind/actions/workflows/release.yml/badge.svg)](https://github.com/Se-Gl/nextjs-boilerplate-tailwind/actions/workflows/release.yml)\n\n## Getting Started\n\nInstall the dependencies\n\n```bash\n# install all dependencies\nnpm install\n# set-up husky\nnpm run prepare\n\n# ⚠️ If error, install husky and cypress manually\nnpm install husky --save-dev\nnpm install --save-dev cypress\n```\n\nRun the development server:\n\n```bash\n# start the localhost server and cypress\nnpm run e2e\n\n# backup\nnpm run dev\n```\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n- GitHub: head to the repository -\u003e Actions -\u003e General and under `Actions permissions` set `Allow all actions and reusable workflows` and under `Workflow permissions` make sure `Read and write permissions` are enabled.\n\n### cypress commands\n\n```bash\n# open cypress GUI\nnpm run cypress:open\n# run all cypress tests in the console\nnpm run cypress:run\n```\n\n### esLint commands\n\n```bash\n# default nextjs eslint command\nnpm run lint\n# fix eslint errors by running prettier\nnpm run prettier\n```\n\n### Github actions\n\n- In order to follow best practices, simple github actions have been implemented.\n- This Project checks for EsLint errors (according to our .eslintrs.json rules) before pushing to the repo.\n- This Project checks the code for prettier violations (according to our .prettierrc file) before pushing to the repo.\n- This Project checks if the build process is completed successfully before pushing to the repo.\n- This Project tests the code with cypress before pushing to the repo.\n\n### Styling\n\n⚠️ tailwindcss should be used primarily. For special cases or animations SCSS can be used.\n\nUse the generateUtilities function to generate a range of numbers. Props: `start:number, end:number, unit = 'px':string`. Enter the start number, the end number and the CSS unit in sequenze.\n\n```js\n// tailwind.config.js\n...\n{\n    theme: {\n    extend: {\n      margin: generateUtilities(-100, 100, '%') // will generate margin from -100% to 100%\n      padding: generateUtilities(-100, 100, 'px') // will generate padding from -100px to 100px\n    }\n  },\n}\n...\n```\n\nExample:\n\n- Negative values: `-mt-20%`\n- Positive values: `mb-50%`\n- Zero values: `pr-0px`\n\n### SCSS Structure - 7:1\n\nKeeping the architecture consistent and meaningful is even more of a challenge.\n\nA common and effective modular method for structuring Sass projects is the 7-1 pattern. This approach will be used in the development process of this project.\n\nA possible structure could look as follows _(as of May 2023)_\n\n```txt\nsass/\n|\n|– abstracts/\n|   |– _index.scss        # Sass Index File\n|\n|– base/\n|   |– _index.scss        # Sass Index File\n|   |– _reset.scss        # Basic browser styling reset file\n|\n|– components/\n|   |– _index.scss        # Sass Index File\n|\n|– layout/\n|   |– _index.scss        # Sass Index File\n|\n|– pages/\n|   |– _index.scss        # Custom Page Styles\n|\n|– themes/\n|   |– _index.scss        # Sass Index File\n|\n|– vendors/\n|   |– _index.scss        # 3rd Party Solutions\n|\n – globals.scss              # Main Sass Input File\n```\n\n## Contribute: We Use Semantic Release\n\nWe use semantic versioning for commit messages.\nCheck the [contributing file](/.github/contributing.md) for more details.\n\n1. Fork the repo and create your branch from `main`.\n2. If you've added code that should be tested, add tests.\n3. If you've changed APIs or added new dependencies, update the documentation.\n4. Ensure the test suite passes.\n5. Make sure your code lints.\n6. Use semantic versioning for commits.\n7. Issue a pull request!\n\nFor commit messages, use semantig writing:\n\n| Commit                                                                                        |      Usage       | Version |\n| --------------------------------------------------------------------------------------------- | :--------------: | ------- |\n| fix(your-change): a small change, p.e. fixed a component, readme or test                      |   Fix Release    | v.0.0.1 |\n| feat(your-change): a new feature, p.e. test suite for a component                             | Feature Release  | v.0.1.0 |\n| perf(your-change): a breaking change or hotfix \\n BREAKING CHANGE: p.e. added a new component | Breaking Release | v.1.0.0 |\n\nA breaking change must be written in the footer. p.e.\n\n`perf(your-change): a breaking change or hotfix\n\nBREAKING CHANGE: First line of explanation\nOther lines of explanations`\n\nPossible commit values are:\n\n```json\n[\n  'build',\n  'chore',\n  'ci',\n  'docs',\n  'feat',\n  'fix',\n  'perf',\n  'refactor',\n  'revert',\n  'style',\n  'test'\n];\n```\n\n### Basic Frontend Libraries\n\n|                                                            | Stars                                                                                                | Bundle size                                                                                                                               | Maintained | Dev- Mode |\n| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------- |\n| [next](https://www.npmjs.com/package/next)                 | ![GitHub stars](https://img.shields.io/github/stars/vercel/next.js.svg?label=%F0%9F%8C%9F)           | N/A                                                                                                                                       | ✅         | ➖        |\n| [sass](https://www.npmjs.com/package/sass)                 | ![GitHub stars](https://img.shields.io/github/stars/sass/dart-sass.svg?label=%F0%9F%8C%9F)           | [![Bundle size](https://badgen.net/bundlephobia/minzip/sass/?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=sass)                 | ✅         | ✅        |\n| [tailwindcss](https://www.npmjs.com/package/tailwindcss)   | ![GitHub stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?label=%F0%9F%8C%9F) | [![Bundle size](https://badgen.net/bundlephobia/minzip/tailwindcss/?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=tailwindcss)   | ✅         | ➖        |\n| [postcss](https://www.npmjs.com/package/postcss)           | ![GitHub stars](https://img.shields.io/github/stars/postcss/postcss.svg?label=%F0%9F%8C%9F)          | [![Bundle size](https://badgen.net/bundlephobia/minzip/postcss/?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=postcss)           | ✅         | ➖        |\n| [autoprefixer](https://www.npmjs.com/package/autoprefixer) | ![GitHub stars](https://img.shields.io/github/stars/postcss/autoprefixer.svg?label=%F0%9F%8C%9F)     | [![Bundle size](https://badgen.net/bundlephobia/minzip/autoprefixer/?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=autoprefixer) | ✅         | ➖        |\n\n### Testing Libraries\n\n|                                                  | Stars                                                                                          | Bundle size                                                                                                                   | Maintained | Dev- Mode |\n| ------------------------------------------------ | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | --------- |\n| [cypress](https://www.npmjs.com/package/cypress) | ![GitHub stars](https://img.shields.io/github/stars/cypress-io/cypress.svg?label=%F0%9F%8C%9F) | [![Bundle size](https://badgen.net/bundlephobia/minzip/cypress?label=%F0%9F%92%BE)](https://bundlephobia.com/package/cypress) | ✅         | ✅        |\n\n### Automated Workflow Libraries\n\n|                                                                                                  | Stars                                                                                                         | Bundle size                                                                                                                                                                    | Maintained | Dev- Mode |\n| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --------- |\n| [prettier](https://www.npmjs.com/package/prettier)                                               | ![GitHub stars](https://img.shields.io/github/stars/prettier/prettier.svg?label=%F0%9F%8C%9F)                 | [![Bundle size](https://badgen.net/bundlephobia/minzip/prettier/?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=prettier)                                              | ✅         | ✅        |\n| [eslint](https://www.npmjs.com/package/eslint)                                                   | ![GitHub stars](https://img.shields.io/github/stars/eslint/eslint.svg?label=%F0%9F%8C%9F)                     | [![Bundle size](https://badgen.net/bundlephobia/minzip/eslint/?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=eslint)                                                  | ✅         | ✅        |\n| [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)                   | ![GitHub stars](https://img.shields.io/github/stars/prettier/eslint-config-prettier.svg?label=%F0%9F%8C%9F)   | [![Bundle size](https://badgen.net/bundlephobia/minzip/eslint-config-prettier?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=eslint-config-prettier)                   | ✅         | ✅        |\n| [husky](https://www.npmjs.com/package/husky)                                                     | ![GitHub stars](https://img.shields.io/github/stars/typicode/husky.svg?label=%F0%9F%8C%9F)                    | [![Bundle size](https://badgen.net/bundlephobia/minzip/husky?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=husky)                                                     | ✅         | ✅        |\n| [lint-staged](https://www.npmjs.com/package/lint-staged)                                         | ![GitHub stars](https://img.shields.io/github/stars/okonet/lint-staged.svg?label=%F0%9F%8C%9F)                | [![Bundle size](https://badgen.net/bundlephobia/minzip/lint-staged?label=%F0%9F%92%BE)](https://bundlephobia.com/result?p=lint-staged)                                         | ✅         | ✅        |\n| [@commitlint/cli](https://www.npmjs.com/package/@commitlint/cli)                                 | ![GitHub stars](https://img.shields.io/github/stars/conventional-changelog/commitlint.svg?label=%F0%9F%8C%9F) | [![Bundle size](https://badgen.net/bundlephobia/minzip/@commitlint/cli/?label=%F0%9F%92%BE)](https://bundlephobia.com/package/@commitlint/cli)                                 | ✅         | ✅        |\n| [@commitlint/config-conventional](https://www.npmjs.com/package/@commitlint/config-conventional) | ![GitHub stars](https://img.shields.io/github/stars/conventional-changelog/commitlint.svg?label=%F0%9F%8C%9F) | [![Bundle size](https://badgen.net/bundlephobia/minzip/@commitlint/config-conventional/?label=%F0%9F%92%BE)](https://bundlephobia.com/package/@commitlint/config-conventional) | ✅         | ✅        |\n\n### Sources\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fse-gl%2Fnextjs-boilerplate-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fse-gl%2Fnextjs-boilerplate-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fse-gl%2Fnextjs-boilerplate-tailwind/lists"}