{"id":13415424,"url":"https://github.com/excid3/tailwindcss-stimulus-components","last_synced_at":"2025-05-13T15:11:48.239Z","repository":{"id":33704895,"uuid":"160866862","full_name":"excid3/tailwindcss-stimulus-components","owner":"excid3","description":"A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.","archived":false,"fork":false,"pushed_at":"2025-04-09T13:27:07.000Z","size":2841,"stargazers_count":1471,"open_issues_count":5,"forks_count":143,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-04-23T18:58:01.077Z","etag":null,"topics":["hacktoberfest","stimulusjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://excid3.github.io/tailwindcss-stimulus-components/","language":"JavaScript","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/excid3.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"MIT-LICENSE","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,"zenodo":null},"funding":{"github":["excid3"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-12-07T19:28:42.000Z","updated_at":"2025-04-21T22:01:29.000Z","dependencies_parsed_at":"2024-04-18T11:49:18.707Z","dependency_job_id":"83ac4c2b-a32f-419c-a2be-6a639776343a","html_url":"https://github.com/excid3/tailwindcss-stimulus-components","commit_stats":{"total_commits":343,"total_committers":63,"mean_commits":5.444444444444445,"dds":0.3731778425655977,"last_synced_commit":"cee47a8c464b8353361e1e1238fb27ee48f47439"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excid3%2Ftailwindcss-stimulus-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excid3%2Ftailwindcss-stimulus-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excid3%2Ftailwindcss-stimulus-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excid3%2Ftailwindcss-stimulus-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/excid3","download_url":"https://codeload.github.com/excid3/tailwindcss-stimulus-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969260,"owners_count":21992263,"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":["hacktoberfest","stimulusjs","tailwindcss"],"created_at":"2024-07-30T21:00:48.600Z","updated_at":"2025-05-13T15:11:43.224Z","avatar_url":"https://github.com/excid3.png","language":"JavaScript","funding_links":["https://github.com/sponsors/excid3"],"categories":["JavaScript","Packages","**Awesome Hotwire** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Stimulus"],"readme":"[![npm](https://img.shields.io/npm/v/tailwindcss-stimulus-components.svg)](https://www.npmjs.com/package/tailwindcss-stimulus-components) [![Tests](https://github.com/excid3/tailwindcss-stimulus-components/actions/workflows/ci.yml/badge.svg)](https://github.com/excid3/tailwindcss-stimulus-components/actions/workflows/ci.yml)\n\n# TailwindCSS Stimulus Components\n\n[Check out the demo](https://excid3.github.io/tailwindcss-stimulus-components/)\n\nThis is a set of components (Tabs, Modals, Dropdowns, etc) for TailwindCSS that uses [StimulusJS](https://stimulusjs.org) controllers.\n\nThe goal is to make using TailwindCSS as easy as Bootstrap when it comes\nto adding Javascript components.\n\n## Install\n\nThis assumes that [StimulusJS](https://stimulusjs.org) is already installed.\n\nAdd the `tailwindcss-stimulus-components` module:\n\n```bash\nyarn add tailwindcss-stimulus-components\n```\n\nor\n\n```bash\nnpm install tailwindcss-stimulus-components\n```\n\nor use with Rails importmaps:\n\n```bash\nbin/importmap pin tailwindcss-stimulus-components\n```\n\n## Basic Usage\n\nFirst, you'll want to initialize StimulusJS and then you can import all the TailwindCSS components.\n\n```javascript\n// Start StimulusJS\nimport { Application } from \"@hotwired/stimulus\"\n\nconst application = Application.start();\n\n// Import and register all TailwindCSS Components or just the ones you need\nimport { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from \"tailwindcss-stimulus-components\"\napplication.register('alert', Alert)\napplication.register('autosave', Autosave)\napplication.register('color-preview', ColorPreview)\napplication.register('dropdown', Dropdown)\napplication.register('modal', Modal)\napplication.register('popover', Popover)\napplication.register('slideover', Slideover)\napplication.register('tabs', Tabs)\napplication.register('toggle', Toggle)\n```\n\nThis will start StimulusJS and load any controllers that you have locally and then register the TailwindCSS components.\n\n## Components\n\n* [Alert](/docs/alert.md)\n* [Autosave](/docs/autosave.md)\n* [Color Preview](/docs/color-preview.md)\n* [Dropdown](/docs/dropdown.md)\n* [Modal](/docs/modal.md)\n* [Popover](/docs/popover.md)\n* [Slideover](/docs/slideover.md)\n* [Tabs](/docs/tabs.md)\n* [Toggle](/docs/toggle.md)\n\n## Utilities\n\n* [transition](/docs/transition.md)\n\n## Styling\n\nAll of the styles for the Stimulus components are configurable. Our\nexamples above show some example styles you can use, but these\ncomponents themselves don't require any specific styles.\n\nStimulus simply requires the `data-` attributes to be defined correctly\nto trigger actions and find targets.\n\nSome components like the modal have some styles that are necessary for\nproper use in the browser. The container and backgrounds are separate so\nthat you can have a fixed size container and the modal inside of it.\n\n## Animations\n\n## Extending Components\n\nYou can use inheritance to extend the functionality of any Stimulus components.\n\n```js\nimport { Dropdown } from \"tailwindcss-stimulus-components\"\n\nexport default class ButtonDropdown extends Dropdown {\n  static targets = [\"button\"]\n\n  connect() {\n    super.connect();\n    console.log(\"the value of button : \", this.buttonTarget.value)\n  }\n}\n```\n\nThese controllers will automatically have access to `targets` defined in the parent class.\n\nIf you override the `connect`, `disconnect` or any other methods from the parent, you'll want to call `super.method()` to make sure the parent functionality is executed.\n\n## Contributing\n\nTo develop locally, run `npx serve` and open your browser to the URL it serves on.\n\nBug reports and pull requests are welcome on GitHub at \u003chttps://github.com/excid3/tailwindcss-stimulus-components\u003e.  This project is intended to be a safe, welcoming space for  collaboration, and contributors are expected to adhere to the  Contributor Covenant code of conduct.\n\nTo run tests:\n\n```bash\nnpm install\nnpm run test\n```\n\n## License\n\nThis package is available as open source under the terms of the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcid3%2Ftailwindcss-stimulus-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexcid3%2Ftailwindcss-stimulus-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcid3%2Ftailwindcss-stimulus-components/lists"}