{"id":14962250,"url":"https://github.com/afc-org/js-tailwind","last_synced_at":"2025-10-04T07:56:27.011Z","repository":{"id":57095442,"uuid":"250510248","full_name":"afc-org/js-tailwind","owner":"afc-org","description":"This is a complementary JS code for the tailwindcss project.","archived":false,"fork":false,"pushed_at":"2020-10-23T08:38:53.000Z","size":544,"stargazers_count":21,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-26T12:34:41.236Z","etag":null,"topics":["javascript","javascript-plugin","javascript-tailwind","javascript-tailwindcss","tailwind","tailwind-css","tailwindcss","tailwindcss-extension","tailwindcss-plugin","tailwindjs"],"latest_commit_sha":null,"homepage":"","language":null,"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/afc-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-27T10:55:43.000Z","updated_at":"2025-03-03T15:13:46.000Z","dependencies_parsed_at":"2022-08-22T23:10:28.307Z","dependency_job_id":null,"html_url":"https://github.com/afc-org/js-tailwind","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/afc-org/js-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Fjs-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Fjs-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Fjs-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Fjs-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afc-org","download_url":"https://codeload.github.com/afc-org/js-tailwind/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Fjs-tailwind/sbom","scorecard":{"id":169445,"data":{"date":"2025-08-11","repo":{"name":"github.com/afc-org/js-tailwind","commit":"9cf69021b88ac5a53270b732d78b51a5dcb2d3af"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Code-Review","score":1,"reason":"Found 1/10 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-16T16:00:01.496Z","repository_id":57095442,"created_at":"2025-08-16T16:00:01.496Z","updated_at":"2025-08-16T16:00:01.496Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277422628,"owners_count":25815346,"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-09-28T02:00:08.834Z","response_time":79,"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":["javascript","javascript-plugin","javascript-tailwind","javascript-tailwindcss","tailwind","tailwind-css","tailwindcss","tailwindcss-extension","tailwindcss-plugin","tailwindjs"],"created_at":"2024-09-24T13:29:46.723Z","updated_at":"2025-10-04T07:56:26.979Z","avatar_url":"https://github.com/afc-org.png","language":null,"readme":"# @afc-org/js-tailwind\n\n![version](https://img.shields.io/badge/version-0.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) \u003ca href=\"https://github.com/afc-org/js-tailwind/issues?q=is%3Aopen+is%3Aissue\" target=\"_blank\"\u003e![GitHub issues open](https://img.shields.io/github/issues/afc-org/js-tailwind.svg)\u003c/a\u003e \u003ca href=\"https://github.com/afc-org/js-tailwind?q=is%3Aissue+is%3Aclosed\" target=\"_blank\"\u003e![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/afc-org/js-tailwind.svg)\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"./assets/logos/javascript-tailwind-logo.png\" alt=\"@afc-org/js-tailwind\" width=\"300\"/\u003e\u003c/div\u003e\n\n### A dynamic plugin extension for TailwindCSS.\n\n**@afc-org/js-tailwind** is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS, It comes with code written with javascript as an extension to TailwindCSS for you to have dynamic components inside your app as well.\n\nIt comes with 8 dynamic components, that any website needs.\nWe plan on implementing more, in the weeks to come.\n\n\n## Table of Contents\n\n* [Versions](#versions)\n* [Components](#components)\n* [Quick Start](#quick-start)\n* [Documentation](#documentation)\n* [Dependencies](#dependencies)\n* [Browser Support](#browser-support)\n* [Reporting Issues](#reporting-issues)\n* [Licensing](#licensing)\n* [Resources](#resources)\n\n## Versions\n\n|Angular|JavaScript|React|Svelte|VueJS|\n| --- | --- | --- | --- | --- |\n| \u003ca href=\"https://github.com/afc-org/angular-tailwind\" target=\"_blank\"\u003e![Check Angular](./assets/logos/angular-tailwind-logo.png)\u003c/a\u003e  | \u003ca href=\"https://github.com/afc-org/js-tailwind\" target=\"_blank\"\u003e![Check JavaScript](./assets/logos/javascript-tailwind-logo.png)\u003c/a\u003e  | \u003ca href=\"https://github.com/afc-org/react-tailwind\" target=\"_blank\"\u003e![Check React](./assets/logos/reactjs-tailwind-logo.png)\u003c/a\u003e  | \u003ca href=\"https://github.com/afc-org/svelte-tailwind\" target=\"_blank\"\u003e![Check Svelte](./assets/logos/svelte-tailwind-logo.png)\u003c/a\u003e    | \u003ca href=\"https://github.com/afc-org/vue-tailwind\" target=\"_blank\"\u003e![Check VueJS](./assets/logos/vuejs-tailwind-logo.png)\u003c/a\u003e|\n\n## Quick Start\n\nAdd the following CDN to your project:\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/afc-org/js-tailwind/dist/js-tailwind.min.js\"\u003e\u003c/script\u003e\n```\n\n## Components\n\n- [Alert](#alert)\n- [Dropdown](#dropdown)\n- [Menu Collpase](#menu-collapse)\n- [Modal](#modal)\n- [Navbar Collpase](#navbar-collapse)\n- [Popover](#popover)\n- [Tooltip](#tooltip)\n- [Tab Pills](#tab-pills)\n\n## Documentation\n\nAfter you have installed `@afc-org/js-tailwind` into your project, you can import and use our components like so:\n```\n\u003cscript src=\"path/to/node_module/@afc-org/js-tailwind/dist/js-tailwind.min.js\"\u003e\u003c/script\u003e\n```\nOr, you can add it from our CDN, and no installation will be required:\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/afc-org/js-tailwind/dist/js-tailwind.min.js\"\u003e\u003c/script\u003e\n```\n\n### Alert\n\nYou need to add an `id` on the alert wrapper.\nAfter that, on the element that you want to add the closing action/event, you need to add\n```\ndata-close=\"alert\"\ndata-target=\"#id-of-the-wrapper\"\n```\nExample usage:\n```\n\u003cdiv\n  class=\" px-5 py-3 border border-solid rounded relative mb-4 bg-indigo-200 text-indigo-800 border-indigo-300\"\n  id=\"alert-id-88325020\"\n\u003e\n  \u003cspan class=\"\"\u003e\u003ci class=\"fa fa-heart\"\u003e\u003c/i\u003e\u003c/span\u003e\n  \u003cspan class=\"\"\u003e\n    \u003cstrong class=\"capitalize\"\u003eprimary!\u003c/strong\u003e This is a primary\n    alert—check it out!\n  \u003c/span\u003e\n  \u003cbutton\n    class=\"absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 outline-none focus:outline-none opacity-50 px-5 py-3 hover:opacity-75 hover:text-black\"\n    data-close=\"alert\"\n    data-target=\"#alert-id-88325020\"\n  \u003e\n    \u003cspan\u003e×\u003c/span\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Dropdown\n\nYou will need a toggler element, on which to add the following attributes:\n```\ndata-toggle=\"dropdown\"\ndata-target=\"#dropdown-id\"\ndata-placement=\"placement\"\n```\nWhere placement can be one of [\"top\",\"bottom\",\"left\",\"right\"].\nAnd on the dropdown menu wrapper element, the following one:\n```\nid=\"dropdown-id\"\n```\nHere is an example:\n```\n\u003cbutton\n  class=\"bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle\"\n  type=\"button\"\n  data-toggle=\"dropdown\"\n  data-target=\"#dropdown-77650932\"\n  data-placement=\"bottom\"\n  style=\"transition: all .15s ease\"\n\u003e\n  primary\n\u003c/button\u003e\n\n\u003cdiv class=\"hidden\" id=\"dropdown-77650932\"\u003e\n  \u003cdiv\n    class=\"py-2 text-base text-left list-none bg-white border border-solid border-gray-100 rounded\"\n    style=\"min-width:12rem\"\n  \u003e\n    \u003ca\n      class=\"block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500\"\n      href=\"#pablo\"\n    \u003e\n      Item 1\n    \u003c/a\u003e\n    \u003ca\n      class=\"block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500\"\n      href=\"#pablo\"\n    \u003e\n      Item 2\n    \u003c/a\u003e\n    \u003ca\n      class=\"block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500\"\n      href=\"#pablo\"\n    \u003e\n      Item 3\n    \u003c/a\u003e\n    \u003ca\n      class=\"block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500\"\n      href=\"#pablo\"\n    \u003e\n      Item 4\n    \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Menu Collpase\n\nYou will need a toggler element, on which to add the following attributes:\n```\ndata-toggle=\"collapse\"\ndata-target=\"#menu-collapse\"\n```\nAnd on the collapse element, the following one:\n```\nid=\"menu-collapse\"\n```\n**NOTE** you can change `menu-collapse` with any ID you would like.\nHere is a full sample code:\n```\n\u003cdiv class=\"flex flex-wrap py-2\"\u003e\n  \u003cdiv class=\"w-full px-4\"\u003e\n    \u003cnav class=\"mb-2 flex flex-wrap items-center justify-between px-4 py-2 rounded bg-blue-600\"\u003e\n      \u003cdiv class=\"flex container mx-auto flex-wrap items-center justify-between px-0 lg:px-4\"\u003e\n        \u003ca class=\"capitalize text-xl inline-block mr-4 py-1 leading-relaxed whitespace-no-wrap text-white\" href=\"./index.html\"\u003e\n          Navbar Brand\n        \u003c/a\u003e\n        \u003cbutton class=\"ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-gray-400 rounded bg-transparent block outline-none focus:outline-none text-gray-300 opacity-50 lg:hidden\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbar-collapse\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e⁝⁝⁝\u003c/span\u003e\n        \u003c/button\u003e\n        \u003cdiv class=\"hidden items-center w-full lg:flex lg:w-auto flex-grow\" id=\"navbar-collapse\"\u003e\n          \u003cul class=\"lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row\"\u003e\n            \u003cli\u003e\n              \u003ca class=\"block py-2 px-2 bg-transparent no-underline text-white opacity-50 hover:opacity-75\"\u003e\n                Simple Link\n              \u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n              \u003ca class=\"block py-2 px-2 bg-transparent no-underline text-white opacity-50 hover:opacity-75\"\u003e\n                One More Simple Link\n              \u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n              \u003ca class=\"block py-2 px-2 bg-transparent no-underline text-white opacity-50 hover:opacity-75\"\u003e\n                Another Simple Link\n              \u003c/a\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/nav\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n**NOTE**: You can change the following classes `lg:hidden` (button toggler), `lg:flex lg:w-auto` (collapse element), `lg:items-center lg:ml-auto` (list wrapper) and `lg:flex-row` (list wrapper), with any available breakpoint from TailwindCSS (`sm`,`md`,`lg`,`xl`).\n**NOTE**: To check the above example, you need to set your window less then 1023px.\n\n### Modal\n\nYou will need a toggler element, on which to add the following attributes:\n```\ndata-toggle=\"modal\"\ndata-target=\"#modal-id\"\n```\nAnd then, on the modal components you will need to add the following ids:\n- modal wrapper div\n```\nid=\"modal-id\"\n```\n- modal inner div\n```\nid=\"modal-id-dialog\"\n```\n- modal sibling div\n```\nid=\"modal-id-backdrop\"\n```\nWhere `modal-id` can be anything\nHere is a full example:\n```\n\u003cbutton\n  class=\"capitalize mb-4 bg-yellow-500 border border-solid border-yellow-500 hover:bg-yellow-600 hover:border-yellow-700 active:bg-yellow-600 active:border-yellow-700 text-gray-800 w-full block text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle\"\n  data-target=\"#regular-modal\"\n  data-toggle=\"modal\"\n  style=\"transition: all .15s ease\"\n\u003e\n  Open Modal\n\u003c/button\u003e\n\n\u003cdiv\n  class=\"opacity-0 z-50 fixed top-0 left-0 hidden w-full h-full overflow-hidden outline-none focus:outline-none transition-opacity duration-75 ease-linear\"\n  id=\"regular-modal\"\n  style=\"display:none\"\n\u003e\n  \u003cdiv\n    class=\" transition-transform duration-300 ease-out relative w-auto m-2 pointer-events-none sm:my-8 sm:mx-auto transform -translate-y-1 sm:max-w-screen-sm\"\n    id=\"regular-modal-dialog\"\n  \u003e\n    \u003cdiv\n      class=\" relative flex flex-col w-full pointer-events-auto bg-white border border-solid border-gray-600 rounded outline-none focus:outline-none\"\n    \u003e\n      \u003cdiv\n        class=\" flex items-start justify-between p-4 border-b border-solid border-gray-300 rounded-t\"\n      \u003e\n        \u003ch5\n          class=\"text-xl mb-2 font-medium leading-tight leading-normal\"\n        \u003e\n          This is a Normy Modal\n        \u003c/h5\u003e\n        \u003cbutton\n          type=\"button\"\n          class=\" float-right text-2xl font-bold text-black leading-none bg-transparent border-0 opacity-50 p-4 -mr-4 -mt-4 -mb-4 ml-auto cursor-pointer\"\n          data-target=\"#regular-modal\"\n          data-toggle=\"modal\"\n        \u003e\n          \u003cspan aria-hidden=\"true\"\u003e×\u003c/span\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\" relative flex-auto p-4\"\u003e\n        \u003cp class=\"mb-4\"\u003e\n          A long time ago in a galaxy far, far away....\n        \u003c/p\u003e\n        \u003cp class=\"mb-4\"\u003e\n          The Normy Modal was just a normal-sized modal, working for\n          the better of the empire, day by day, being a loyal\n          soldier, not asking any questions, doing his part for\n          empowering the empire.\n        \u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv\n        class=\" flex flex-wrap items-center justify-end p-3 border-t border-solid border-gray-300 rounded-b\"\n      \u003e\n        \u003cbutton\n          class=\"m-1 bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle\"\n          style=\"transition: all .15s ease\"\n        \u003e\n          Save changes\n        \u003c/button\u003e\n        \u003cbutton\n          class=\"m-1 bg-gray-600 border border-solid border-gray-600 hover:bg-gray-700 hover:border-gray-800 active:bg-gray-700 active:border-gray-800 text-white text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle\"\n          data-target=\"#regular-modal\"\n          data-toggle=\"modal\"\n          style=\"transition: all .15s ease\"\n        \u003e\n          Close\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv\n  class=\"hidden opacity-50 fixed inset-0 z-40 bg-black\"\n  id=\"regular-modal-backdrop\"\n\u003e\u003c/div\u003e\n```\n\n### Navbar Collpase\n\nYou will need a toggler element, on which to add the following attributes:\n```\ndata-toggle=\"collapse\"\ndata-target=\"#navbar-collapse\"\n```\nAnd on the collapse element, the following one:\n```\nid=\"navbar-collapse\"\n```\n**NOTE** you can change `navbar-collapse` with any ID you would like.\nHere is a full sample code:\n```\n\u003cnav class=\"mb-2 flex flex-wrap items-center justify-between px-4 py-2 bg-blue-600\"\u003e\n  \u003cdiv class=\"flex container mx-auto flex-wrap items-center justify-between px-0 lg:px-4\"\u003e\n    \u003ca class=\"capitalize text-xl inline-block mr-4 py-1 leading-relaxed whitespace-no-wrap text-white\" href=\"./index.html\"\u003e\n      Navbar Brand\n    \u003c/a\u003e\n    \u003cbutton class=\"ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-gray-400 rounded bg-transparent block outline-none focus:outline-none text-gray-300 opacity-50 lg:hidden\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbar-collapse\"\u003e\n      \u003cspan aria-hidden=\"true\"\u003e⁝⁝⁝\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"hidden items-center w-full lg:flex lg:w-auto flex-grow\" id=\"navbar-collapse\"\u003e\n      \u003cul class=\"lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row\"\u003e\n        \u003cli\u003e\n          \u003ca class=\"block py-2 px-2 bg-transparent no-underline text-white opacity-50 hover:opacity-75\"\u003e\n            Simple Link\n          \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003ca class=\"block py-2 px-2 bg-transparent no-underline text-white opacity-50 hover:opacity-75\"\u003e\n            One More Simple Link\n          \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003ca class=\"block py-2 px-2 bg-transparent no-underline text-white opacity-50 hover:opacity-75\"\u003e\n            Another Simple Link\n          \u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/nav\u003e\n```\n**NOTE**: you can change the following classes `lg:hidden` (button toggler), `lg:flex lg:w-auto` (collapse element), `lg:items-center lg:ml-auto` (list wrapper) and `lg:flex-row` (list wrapper), with any available breakpoint from TailwindCSS (`sm`,`md`,`lg`,`xl`).\n**NOTE**: To check the above example, you need to set your window less then 1023px.\n\n### Popover\n\nYou will need a toggler element, on which to add the following attributes:\n```\ndata-toggle=\"popover\"\ndata-target=\"#popover-id\"\ndata-placement=\"placement\"\n```\nWhere placement can be one of [\"top\",\"bottom\",\"left\",\"right\"].\nAnd on the popover element, the following one:\n```\nid=\"popover-id\"\n```\nHere is an example:\n```\n\u003cbutton\n  class=\" text-sm px-2 py-1 leading-normal bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white rounded font-normal outline-none focus:outline-none align-middle\"\n  data-toggle=\"popover\"\n  data-target=\"#popover-75076477\"\n  data-placement=\"right\"\n  style=\"transition: all .15s ease\"\n\u003e\n  On right\n\u003c/button\u003e\n\n\u003cdiv class=\"hidden\" id=\"popover-75076477\"\u003e\n  \u003cdiv\n    class=\"border-0 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded bg-white border border-solid border-gray-400\"\n    style=\"max-width:276px\"\n  \u003e\n    \u003ch3\n      class=\"font-medium leading-tight py-2 px-3 mb-0 border-b border-solid border-gray-200 rounded-t text-base bg-gray-100\"\n    \u003e\n      Popover on right\n    \u003c/h3\u003e\n    \u003cdiv class=\"py-2 px-3 text-gray-900\"\u003e\n      A long time ago in a galaxy far, far away....\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Tooltip\n\nYou will need a toggler element, on which to add the following attributes:\n```\ndata-toggle=\"tooltip\"\ndata-target=\"#tooltip-id\"\ndata-placement=\"placement\"\n```\nWhere placement can be one of [\"top\",\"bottom\",\"left\",\"right\"].\nAnd on the tooltip element, the following one:\n```\nid=\"tooltip-id\"\n```\nHere is an example:\n```\n\u003cbutton\n  class=\" text-sm px-2 py-1 leading-normal bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white rounded font-normal outline-none focus:outline-none align-middle\"\n  data-toggle=\"tooltip\"\n  data-target=\"#tooltip-87505381\"\n  style=\"transition: all .15s ease\"\n\u003e\n  On top\n\u003c/button\u003e\n\u003cdiv class=\"hidden\" id=\"tooltip-87505381\"\u003e\n  \u003cdiv\n    class=\"border-0 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded\"\n    style=\"max-width:276px\"\n  \u003e\n    \u003cdiv\n      class=\"py-1 px-2 text-center rounded text-white bg-black\"\n      style=\"max-width:200px\"\n    \u003e\n      Tooltip on top\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Tab Pills\n\nYou will need an unordered list, with anchor elements as children of the list items (`ul \u003e li \u003e a`).\nOn the anchor element you will have to add the following attributes:\n```\ndata-toggle=\"tab\"\nhref=\"#id-of-the-content\"\nclass=\"text-white bg-blue-600\" // for active elements\nclass=\"bg-transparent text-blue-600\" // for non-active elements\n```\nAnd on the content to by displayed alongside the tab, you will have to add the same id:\n```\nid=\"id-of-the-content\"\n```\nExample usage:\n```\n\u003cul class=\"flex-col md:flex-row flex flex-wrap list-none pl-0 mb-0\"\u003e\n  \u003cli class=\"flex-auto text-center\"\u003e\n    \u003ca class=\"block py-2 px-4 no-underline rounded text-white bg-blue-600 sm:mb-4 md:mb-0\" data-toggle=\"tab\" href=\"#home\"\u003e\n      \u003ci class=\"mr-2 fas fa-cloud-upload-alt\"\u003e\u003c/i\u003eHome\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli class=\"sm:mb-4 md:mb-0 flex-auto text-center\"\u003e\n    \u003ca class=\"block py-2 px-4 no-underline rounded bg-transparent text-blue-600\" data-toggle=\"tab\" href=\"#profile\"\u003e\n      \u003ci class=\"mr-2 far fa-bell\"\u003e\u003c/i\u003eProfile\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli class=\"sm:mb-4 md:mb-0 flex-auto text-center\"\u003e\n    \u003ca class=\"block py-2 px-4 no-underline rounded bg-transparent text-blue-600\" data-toggle=\"tab\" href=\"#message\"\u003e\n      \u003ci class=\"mr-2 far fa-calendar-alt\"\u003e\u003c/i\u003eMessages\n    \u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"mt-2 relative flex flex-col min-w-0 break-words border border-solid border-gray-300 rounded\"\u003e\n  \u003cdiv class=\"p-5 flex-auto\"\u003e\n    \u003cdiv class=\"block\"\u003e\n      \u003cdiv class=\"block\" id=\"home\"\u003e\n        \u003cp class=\"mb-4\"\u003e\n          Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.\n        \u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"hidden\" id=\"profile\"\u003e\n        \u003cp\u003e\n          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n        \u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"hidden\" id=\"message\"\u003e\n        \u003cp\u003e\n          Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nIf you wish to change the active classes of the anchor elements, and the non-active classes, you can do so, by calling the initTabs function:\n```\n// initTabs(activeClasses,normalClasses)\n//  - activeClasses is for setting the classes for the active tab (anchor element)\n//  - normalClasses is for setting the classes for all the tabs (anchor elements) expect the\n// one that is currently active, if they are unset, then the default ones will be choosen\n// activeClasses = \"bg-blue-600 text-white\"\n// normalClasses = \"text-blue-600 bg-transparent\"\n(function () {\n  initTabs(activeClasses,normalClasses);\n}());\n```\nHere is an example of that usage:\n```\n\u003cul class=\"flex-col md:flex-row flex flex-wrap list-none pl-0 mb-0\"\u003e\n  \u003cli class=\"flex-auto text-center\"\u003e\n    \u003ca class=\"block py-2 px-4 no-underline rounded text-gray-100 bg-pink-600 sm:mb-4 md:mb-0\" data-toggle=\"tab\" href=\"#home\"\u003e\n      \u003ci class=\"mr-2 fas fa-cloud-upload-alt\"\u003e\u003c/i\u003eHome\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli class=\"sm:mb-4 md:mb-0 flex-auto text-center\"\u003e\n    \u003ca class=\"block py-2 px-4 no-underline rounded bg-gray-100 text-pink-600\" data-toggle=\"tab\" href=\"#profile\"\u003e\n      \u003ci class=\"mr-2 far fa-bell\"\u003e\u003c/i\u003eProfile\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli class=\"sm:mb-4 md:mb-0 flex-auto text-center\"\u003e\n    \u003ca class=\"block py-2 px-4 no-underline rounded bg-gray-100 text-pink-600\" data-toggle=\"tab\" href=\"#message\"\u003e\n      \u003ci class=\"mr-2 far fa-calendar-alt\"\u003e\u003c/i\u003eMessages\n    \u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  (function () {\n    initTabs(\"bg-pink-600 text-gray-100\",\"text-pink-600 bg-gray-100\");\n  }());\n\u003c/script\u003e\n```\n\n### Styles\n\nDo not forget that you will need to either get a compiled version of TailwindCSS, or to compile your own version, but one that will have the following classes from TailwindCSS:\n```\npx-5 py-3 border border-solid rounded relative mb-4 absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 outline-none focus:outline-none opacity-50 hover:opacity-75 hover:text-black text-xl inline-block mr-5 align-middle mr-8 bg-indigo-200 text-indigo-800 border-indigo-300 bg-gray-300 text-gray-800 border-gray-400 bg-green-200 text-green-800 border-green-300 bg-red-200 text-red-800 border-red-300 bg-orange-200 text-orange-800 border-orange-300 bg-blue-200 text-blue-800 border-blue-300 bg-white text-gray-600 border-gray-100 bg-gray-400 border-gray-500 left-0 z-50 hidden py-2 text-base text-left list-none mt-1 mb-1 mr-1 ml-1 block w-full py-1 px-6 clear-both font-normal whitespace-no-wrap border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500 text-white bg-blue-500 text-gray-400 pointer-events-none mb-2 flex flex-wrap items-center bg-gray-600 justify-between px-4 bg-blue-600 container mx-auto lg:px-4 px-0 capitalize mr-4 leading-relaxed ml-auto cursor-pointer px-3 text-gray-300 lg:hidden lg:flex lg:w-auto flex-grow lg:items-center lg:ml-auto pl-0 mb-0 flex-col lg:flex-row px-2 no-underline mb-3 leading-normal text-sm break-words text-center bg-black mr-2 ml-2 bg-green-600 bg-red-600 bg-yellow-500 bg-teal-500 bg-gray-100 text-gray-900 text-black bg-gray-800 -mb-px flex-auto text-blue-600 hover:text-blue-700 cursor-default rounded-t border-transparent border-b-0 border-b border-gray-200 sm:flex-row md:flex-row xl:flex-row navbar-expand sm:hidden md:hidden xl:hidden p-4 pointer-events-auto border-gray-600 transition-transform duration-300 ease-out w-auto m-2 sm:my-8 sm:mx-auto transform -translate-y-1 sm:max-w-xs md:max-w-screen-md lg:max-w-screen-lg sm:max-w-screen-sm justify-end p-3 border-t border-gray-300 rounded-b items-start opacity-0 fixed h-full overflow-hidden transition-opacity duration-75 ease-linear font-medium leading-tight mb-3mr-3 ml-3 mt-3\n```\nIf you use `purge`, `postcss-purgecss`, `postcss` or any other tool to delete unused `css`, you can add the following array into your ignore (i.e. keep classes / whitelist etc.):\n```\n[\"px-5\",\"py-3\",\"border\",\"border-solid\",\"rounded\",\"relative\",\"mb-4\",\"absolute\",\"bg-transparent\",\"text-2xl\",\"font-semibold\",\"leading-none\",\"right-0\",\"top-0\",\"outline-none\",\"focus:outline-none\",\"opacity-50\",\"hover:opacity-75\",\"hover:text-black\",\"text-xl\",\"inline-block\",\"mr-5\",\"align-middle\",\"mr-8\",\"bg-indigo-200\",\"text-indigo-800\",\"border-indigo-300\",\"bg-gray-300\",\"text-gray-800\",\"border-gray-400\",\"bg-green-200\",\"text-green-800\",\"border-green-300\",\"bg-red-200\",\"text-red-800\",\"border-red-300\",\"bg-orange-200\",\"text-orange-800\",\"border-orange-300\",\"bg-blue-200\",\"text-blue-800\",\"border-blue-300\",\"bg-white\",\"text-gray-600\",\"border-gray-100\",\"bg-gray-400\",\"border-gray-500\",\"left-0\",\"z-50\",\"hidden\",\"py-2\",\"text-base\",\"text-left\",\"list-none\",\"mt-1\",\"mb-1\",\"mr-1\",\"ml-1\",\"block\",\"w-full\",\"py-1\",\"px-6\",\"clear-both\",\"font-normal\",\"whitespace-no-wrap\",\"border-0\",\"hover:text-gray-900\",\"hover:bg-gray-100\",\"active:text-white\",\"active:bg-blue-500\",\"text-white\",\"bg-blue-500\",\"text-gray-400\",\"pointer-events-none\",\"mb-2\",\"flex\",\"flex-wrap\",\"items-center\",\"bg-gray-600\",\"justify-between\",\"px-4\",\"bg-blue-600\",\"container\",\"mx-auto\",\"lg:px-4\",\"px-0\",\"capitalize\",\"mr-4\",\"leading-relaxed\",\"ml-auto\",\"cursor-pointer\",\"px-3\",\"text-gray-300\",\"lg:hidden\",\"lg:flex\",\"lg:w-auto\",\"flex-grow\",\"lg:items-center\",\"lg:ml-auto\",\"pl-0\",\"mb-0\",\"flex-col\",\"lg:flex-row\",\"px-2\",\"no-underline\",\"mb-3\",\"leading-normal\",\"text-sm\",\"break-words\",\"text-center\",\"bg-black\",\"mr-2\",\"ml-2\",\"bg-green-600\",\"bg-red-600\",\"bg-yellow-500\",\"bg-teal-500\",\"bg-gray-100\",\"text-gray-900\",\"text-black\",\"bg-gray-800\",\"-mb-px\",\"flex-auto\",\"text-blue-600\",\"hover:text-blue-700\",\"cursor-default\",\"rounded-t\",\"border-transparent\",\"border-b-0\",\"border-b\",\"border-gray-200\",\"sm:flex-row\",\"md:flex-row\",\"xl:flex-row\",\"navbar-expand\",\"sm:hidden\",\"md:hidden\",\"xl:hidden\",\"p-4\",\"pointer-events-auto\",\"border-gray-600\",\"transition-transform\",\"duration-300\",\"ease-out\",\"w-auto\",\"m-2\",\"sm:my-8\",\"sm:mx-auto\",\"transform\",\"-translate-y-1\",\"sm:max-w-xs\",\"md:max-w-screen-md\",\"lg:max-w-screen-lg\",\"sm:max-w-screen-sm\",\"justify-end\",\"p-3\",\"border-t\",\"border-gray-300\",\"rounded-b\",\"items-start\",\"opacity-0\",\"fixed\",\"h-full\",\"overflow-hidden\",\"transition-opacity\",\"duration-75\",\"ease-linear\",\"font-medium\",\"leading-tight\",\"mb-3mr-3\",\"ml-3\",\"mt-3\"]\n```\nThen, you can import your styles inside your files like so:\n```\n\u003clink rel=\"stylesheet\" href=\"path/to/your/tailwindcss/compiled/styles.css\"\u003e\n```\n**NOTE**: alternatively, you can leave the components without any TailwindCSS styling code and render only HTML.\n\n## Dependencies\n\n**@afc-org/js-tailwindj** to properly work needs the following dependencies:\n```\n\u003c!-- Development version --\u003e\n\u003cscript src=\"https://unpkg.com/@popperjs/core@2/dist/umd/popper.js\"\u003e\u003c/script\u003e\n```\nOr\n```\n\u003c!-- Production version --\u003e\n\u003cscript src=\"https://unpkg.com/@popperjs/core@2\"\u003e\u003c/script\u003e\n```\n\n## Browser Support\n\nAt present, we officially aim to support the last two versions of the following browsers:\n\n| Chrome | Firefox | Edge | Safari | Opera |\n|:---:|:---:|:---:|:---:|:---:|\n| \u003cimg src=\"./assets/logos/chrome-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"./assets/logos/firefox-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"./assets/logos/edge-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"./assets/logos/safari-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"./assets/logos/opera-logo.png\" width=\"64\" height=\"64\"\u003e |\n\n## Reporting Issues\n\nWe use GitHub Issues as the official bug tracker for the Angular Landing Page. Here are some advices for our users that want to report an issue:\n\n1. Make sure that you are using the latest version of the @afc-org/js-tailwind.\n2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.\n3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.\n\n## Contributors\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n\n## Licensing\n\n- Copyright 2020 @afc-org/js-tailwind\n\n- Licensed under \u003ca href=\"https://github.com/afc-org/js-tailwind/blob/master/LICENSE.md\" target=\"_blank\"\u003eMIT\u003c/a\u003e\n\n## Resources\n- AFC-ORG projects: \u003ca href=\"https://github.com/afc-org/\" target=\"_blank\"\u003ehttps://github.com/afc-org/\u003c/a\u003e\n- JavaScript \u0026 TailwindCSS: \u003ca href=\"https://github.com/afc-org/js-tailwind\" target=\"_blank\"\u003ehttps://github.com/afc-org/js-tailwind\u003c/a\u003e\n- Angular \u0026 TailwindCSS: \u003ca href=\"https://github.com/afc-org/angular-tailwind\" target=\"_blank\"\u003ehttps://github.com/afc-org/angular-tailwind\u003c/a\u003e\n- React \u0026 TailwindCSS: \u003ca href=\"https://github.com/afc-org/angular-tailwind\" target=\"_blank\"\u003ehttps://github.com/afc-org/react-tailwind\u003c/a\u003e\n- Svelte \u0026 TailwindCSS: \u003ca href=\"https://github.com/afc-org/angular-tailwind\" target=\"_blank\"\u003ehttps://github.com/afc-org/svelte-tailwind\u003c/a\u003e\n- VueJS \u0026 TailwindCSS:  \u003ca href=\"https://github.com/afc-org/angular-tailwind\" target=\"_blank\"\u003ehttps://github.com/afc-org/vue-tailwind\u003c/a\u003e\n- Issues: \u003ca href=\"https://github.com/afc-org/js-tailwind/issues\" target=\"_blank\"\u003eGithub Issues Page\u003c/a\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafc-org%2Fjs-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafc-org%2Fjs-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafc-org%2Fjs-tailwind/lists"}