{"id":16221846,"url":"https://github.com/manjumjn/tailwindify","last_synced_at":"2025-07-19T03:34:43.638Z","repository":{"id":46458596,"uuid":"413087210","full_name":"manjumjn/tailwindify","owner":"manjumjn","description":"TailwindCSS HTML Components","archived":false,"fork":false,"pushed_at":"2022-01-18T07:48:03.000Z","size":735,"stargazers_count":1,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-04T07:24:55.999Z","etag":null,"topics":["hactoberfest","hactoberfest2021","parceljs","parceljs-tailwindcss","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manjumjn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-03T13:34:37.000Z","updated_at":"2021-10-26T11:00:37.000Z","dependencies_parsed_at":"2022-09-23T01:11:21.899Z","dependency_job_id":null,"html_url":"https://github.com/manjumjn/tailwindify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/manjumjn/tailwindify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjumjn%2Ftailwindify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjumjn%2Ftailwindify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjumjn%2Ftailwindify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjumjn%2Ftailwindify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manjumjn","download_url":"https://codeload.github.com/manjumjn/tailwindify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjumjn%2Ftailwindify/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265883683,"owners_count":23843793,"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":["hactoberfest","hactoberfest2021","parceljs","parceljs-tailwindcss","tailwindcss"],"created_at":"2024-10-10T12:10:04.078Z","updated_at":"2025-07-19T03:34:43.610Z","avatar_url":"https://github.com/manjumjn.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌫 Tailwindify\nHTML Components built using TailwindCSS\n\n### Built With\n- [TailwindCSS](https://tailwindcss.com/)\n- [ParcelJS](https://parceljs.org/)\n\n## 🎫 Table of Components\n  * [Usage](#usage)\n    + [Install Dependencies](#install-dependencies)\n    + [Build Components](#build-components)\n    + [Update Components and Watch](#update-components-and-watch)\n  * [How it works](#how-it-works)\n  * [Naming Convention](#naming-convention)\n  * [How to add new component](#how-to-add-new-component)\n  * [Contribution](#contribution)\n  * [License](#license)\n  * [Contact Information](#contact-information)\n\n## 📜 File Structure\n\n```\n  ├── src/\n        ├──components             contains components respective folder with markup and styles\n            ├──COMPONENT A        components folder where all components with their respective folders are present\n                ├──index.html     component A markup file\n                ├──style.scss     component A style file (Optional)\n                ├──preview.md     component screenshot preview on folder access\n                ├──preview.png    component design preview image\n            ├──COMPONENT B              \n                ├──index.html     \n                ├──style.scss\n            ├──COMPONENT B VARIATION      \n                ├──index.html     \n                ├──style.scss\n            ....\n            ....\n            ....\n            ....\n            ├──COMPONENT X              \n                ├──index.html     \n                ├──style.scss\n        ├──style.scss             Main page styles\n        ├──index.html             Main page of the website\n  ├── dist/  Optimized components with respective folders (Available after `yarn build`)\n```\n## 📊 Usage\n\n### Install Dependencies\n\n```bash\nyarn install\n```\n\n### Run Dev Server\n\n```bash\nyarn serve\n```\n\n\u003e Note: The local dev server can be accessed through port `8989` i.e., **`localhost:8989`** and corresponding components by accessing folder/file as **`localhost:8989/components/COMPONENT_FOLDER/index.html`** eg: `localhost:8989/components/alert/index.html`\n\n\n### Build Components\n\n```bash\nyarn build\n```\n\n\n\n## 👩‍💻 How it works\n\n- Each component is present in its respective folder eg: `components/COMPONENT1`,`components/COMPONENT2`, Eg: `components/card` etc\n- SCSS file is added and linked directly within HTML using `link` attribute which will be compiled by parcel which as default `tailwindcss` styles.\n\n  ````HTML\n  \u003clink rel=\"stylesheet\" href=\"style.scss\"\u003e\n  ````\n  \n  **Note: Tailwind Styles are required for each respective component style (SCSS) file within which you can use `@apply` directive to extract tw classes to respective component classes**\n  ```scss\n  @tailwind base;\n  @tailwind components;\n  @tailwind utilities;\n\n  // Other styles here using @apply for extracting tailwind classes to each class\n  ```\n- Once the command `yarn build` is run, the output files will be present on `dist` folder with the same component structure.\n\n## 🖋 Naming Convention\n\n- Each Component should follow the naming as `SERIAL_NUMBER-COMPONENT_NAME`. Eg: `01-alert`,'02-notifications' etc\n- When there is a variation of the component such as `alert` we can name as `01-alert-variant2` etc\n- The serial number must follow along with category. For Example currently no card component is present, in that case `01-card`. Each component numbering starts from `01` followed by category\n\n## ➕ How to add new component\n\n1. Go to `src/components` directory. Duplicate the `template` folder into components with the component name. Follow [Naming Convention](#naming-convention) for naming the folder\n2. Update the title in `index.html` and contents within `\u003c!-- Component start --\u003e \u003c!-- Component End --\u003e` lines.\n3. Take a Screenshot of the result and replace the `preview.png` within the component folder.\n4. Run `yarn serve` to play with changes\n\n## 🗣 Contribution\n\nGlad to see you are interested in improving this repository. Please read the contributing guidelines [here](https://github.com/manjumjn/tailwindify/blob/main/CONTRIBUTING.md)\n\n## 📄 License\n\nBy contributing, you agree that your contributions will be licensed under its MIT License.\n\n## 📳 Contact Information\n\n- Email: manjumjng2@gmail.com\n- Twitter: https://twitter.com/manjumjn\n- Website: https://manjumjn.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanjumjn%2Ftailwindify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanjumjn%2Ftailwindify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanjumjn%2Ftailwindify/lists"}