{"id":20299496,"url":"https://github.com/afc-org/react-tailwind","last_synced_at":"2025-06-30T06:03:48.057Z","repository":{"id":57095441,"uuid":"253793444","full_name":"afc-org/react-tailwind","owner":"afc-org","description":"This is a complementary React code for the tailwindcss project.","archived":false,"fork":false,"pushed_at":"2020-06-19T12:44:34.000Z","size":606,"stargazers_count":32,"open_issues_count":7,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-16T22:06:13.117Z","etag":null,"topics":["components","react","react-tailwindcss","react-tailwindjs","reactjs","reactjs-components","tailwind","tailwindcss","tailwindcss-extension","tailwindcss-plugin","tailwindjs","ui"],"latest_commit_sha":null,"homepage":"","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/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-04-07T12:58:26.000Z","updated_at":"2024-01-04T04:11:53.000Z","dependencies_parsed_at":"2022-08-22T19:31:21.999Z","dependency_job_id":null,"html_url":"https://github.com/afc-org/react-tailwind","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/afc-org/react-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Freact-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Freact-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Freact-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Freact-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afc-org","download_url":"https://codeload.github.com/afc-org/react-tailwind/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afc-org%2Freact-tailwind/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262344327,"owners_count":23296483,"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":["components","react","react-tailwindcss","react-tailwindjs","reactjs","reactjs-components","tailwind","tailwindcss","tailwindcss-extension","tailwindcss-plugin","tailwindjs","ui"],"created_at":"2024-11-14T16:15:00.047Z","updated_at":"2025-06-30T06:03:47.996Z","avatar_url":"https://github.com/afc-org.png","language":"JavaScript","readme":"# @afc-org/react-tailwind\n\n![version](https://img.shields.io/badge/version-0.1.1-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) \u003ca href=\"https://github.com/afc-org/react-tailwind/issues?q=is%3Aopen+is%3Aissue\" target=\"_blank\"\u003e![GitHub issues open](https://img.shields.io/github/issues/@afc-org/react-tailwind.svg)\u003c/a\u003e \u003ca href=\"https://github.com/afc-org/react-tailwind?q=is%3Aissue+is%3Aclosed\" target=\"_blank\"\u003e![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/@afc-org/react-tailwind.svg)\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"./assets/logos/reactjs-tailwind-logo.png\" alt=\"@afc-org/react-tailwind\" width=\"300\"/\u003e\u003c/div\u003e\n\n### A dynamic plugin extension for TailwindCSS.\n\n@afc-org/react-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 React as an extension to TailwindCSS for you to have dynamic components inside your app as well.\n\n**Components**\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## Components\n\n- [Alert](#alert)\n- [Button](#button)\n- [Dropdown](#dropdown)\n- [Menu](#menu)\n- [Modal](#modal)\n- [Navbar](#navbar)\n- [Popover](#popover)\n- [Tooltip](#tooltip)\n- [Tab Pills](#tab-pills)\n\n## Quick start\n\n```\nnpm i -E @afc-org/react-tailwind\n```\n\n## Documentation - React\n\nAfter you have installed `@afc-org/react-tailwind` into your project, you can import and use our components like so:\n\n### Alert\n\nUsage:\n\n```\n// with closing button\n\nimport React from \"react\";\nimport { Alert } from \"@afc-org/react-tailwind\";\n// or direct import\n// import Alert from \"@afc-org/react-tailwind/Alert\";\n\n// With Function Components (hooks)\nexport default function YourFunctionName() {\n  return (\n    \u003c\u003e\n      \u003cAlert\u003eAlert text\u003c/Alert\u003e\n    \u003c/\u003e\n  );\n}\n\n// With Class Components\n// export default class YourClassName extends React.Component{\n//  render() {\n//    return (\n//      \u003c\u003e\n//        \u003cAlert\u003eAlert text\u003c/Alert\u003e\n//      \u003c/\u003e\n//    );\n//  }\n//}\n```\n\n```\n// without closing button\n// this means, that you can controll whether the Alert is shown or not\n\nimport React from \"react\";\nimport { Alert } from \"@afc-org/react-tailwind\";\n// or direct import\n// import Alert from \"@afc-org/react-tailwind/src/Alert\";\n\n// With Function Components (hooks)\nexport default function YourFunctionName() {\n  return (\n    \u003c\u003e\n      \u003cAlert controlled\u003eAlert text\u003c/Alert\u003e\n    \u003c/\u003e\n  );\n}\n\n// With Class Components\n// export default class YourClassName extends React.Component{\n//  render() {\n//    return (\n//      \u003c\u003e\n//        \u003cAlert controlled\u003eAlert text\u003c/Alert\u003e\n//      \u003c/\u003e\n//    );\n//  }\n//}\n```\n\nProps:\n\n```\nAlert.defaultProps = {\n  controlled: false,\n  color: \"pink\",\n  icon: \"\"\n};\n\nAlert.propTypes = {\n  // if set to false, then a closing button will be rendered so that the alert can be closed\n  // if set to true, then the closing button will not be rendered\n  controlled: PropTypes.bool,\n  // set the background, border and text color for the alert\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ]),\n  // adds a font icon to the left of the message\n  // for example, if you have included into your project font-awesome free\n  // you could send \"fa fa-heart\"\n  icon: PropTypes.string,\n  children: PropTypes.node.isRequired\n};\n```\n\n### Button\n\nUsage:\n\n```\nimport React from \"react\";\nimport { Button } from \"@afc-org/react-tailwind\";\n\n// With Function Components (hooks)\nexport default function YourFunctionName() {\n  return (\n    \u003c\u003e\n      \u003cButton color=\"pink\"\u003eButon text\u003c/Button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nProps:\n\n```\nButton.defaultProps = {\n  color: \"pink\"\n};\n\nButton.propTypes = {\n  // set the background, border and text color\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ]),\n  children: PropTypes.node\n}\n```\n\n### Dropdown\n\nUsage:\n\n```\n// uncontrolled usage\nimport React from \"react\";\nimport {\n  Dropdown,\n  DropdownToggle,\n  DropdownMenu,\n  DropdownItem\n} from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  return (\n      \u003cDropdown\u003e\n        \u003cDropdownToggle color=\"dark\"\u003e\n          Dropdown\n        \u003c/DropdownToggle\u003e\n        \u003cDropdownMenu color=\"blue\"\u003e\n          \u003cDropdownItem\u003eItem 1\u003c/DropdownItem\u003e\n          \u003cDropdownItem\u003eItem 2\u003c/DropdownItem\u003e\n          \u003cDropdownItem divider /\u003e\n          \u003cDropdownItem\u003eItem 3\u003c/DropdownItem\u003e\n        \u003c/DropdownMenu\u003e\n      \u003c/Dropdown\u003e\n    );\n}\n\nexport default YourComponent;\n\n// controlled usage\nimport React from \"react\";\nimport {\n  Dropdown,\n  DropdownToggle,\n  DropdownMenu,\n  DropdownItem\n} from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  const [show,setShow] = React.useState(false);\n  return (\n      \u003cDropdown controlled\u003e\n        \u003cDropdownToggle color=\"black\" onClick={() =\u003e setShow(!show)}\u003e\n          Dropdown\n        \u003c/DropdownToggle\u003e\n        \u003cDropdownMenu color=\"blue\" show={show}\u003e\n          \u003cDropdownItem\u003eItem 1\u003c/DropdownItem\u003e\n          \u003cDropdownItem\u003eItem 2\u003c/DropdownItem\u003e\n          \u003cDropdownItem divider /\u003e\n          \u003cDropdownItem\u003eItem 3\u003c/DropdownItem\u003e\n        \u003c/DropdownMenu\u003e\n      \u003c/Dropdown\u003e\n    );\n}\n\nexport default YourComponent;\n```\n\nProps:\n\n```\nDropdown.defaultProps = {\n  placement: \"bottom\"\n};\n\nDropdown.propTypes = {\n  // where the Dropdown should be rendered\n  // NOTE: if there is no place for the dropdown to be rendered\n  //    on the choosen placement, PopperJS will rendered it\n  //    where it has place\n  placement: PropTypes.oneOf([\"top\", \"bottom\", \"left\", \"right\"]),\n  // when using the uncontrolled version\n  // you need to send exactly two children\n  // - DropdownToggle\n  // and\n  // - DropdownMenu\n  // if you fail to do so, an error will be thrown\n  children: PropTypes.node.isRequired\n};\n\nDropdownToggle.defaultProps = {\n  color: \"pink\"\n};\n\nDropdownToggle.propTypes = {\n  // set the background\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ])\n};\n\nDropdownMenu.defaultProps = {\n  show: false,\n  placement: \"top\",\n  color: \"white\"\n};\n\nDropdownMenu.propTypes = {\n  // make the menu hidden or visible\n  show: PropTypes.bool,\n  // where the DropdownMenu should be rendered\n  // NOTE: if there is no place for the dropdown menu to be rendered\n  //    on the choosen placement, PopperJS will rendered it\n  //    where it has place\n  placement: PropTypes.oneOf([\"top\", \"bottom\", \"left\", \"right\"]),\n  // set the background\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ])\n};\n\nDropdownItem.defaultProps = {\n  divider: false,\n  disabled: false,\n  light: true,\n  dark: false,\n  children: null\n};\n\nDropdownItem.propTypes = {\n  // this will make the component to be rendered as a divider line\n  divider: PropTypes.bool,\n  // this will make the component to not be clickable\n  disabled: PropTypes.bool,\n  children: PropTypes.node\n};\n```\n\n### Menu\n\nThis component is integrated in the [Navbar one](#navbar).\nPlease check that component to see how you can get nice React \u0026 Tailwind menus in your app.\n\n### Modal\n\nUsage:\n\n```\nimport React from \"react\";\nimport {\n  Button,\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalDialog,\n  ModalFooter,\n  ModalHead,\n  ModalTitle\n} from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  const [show, setShow] = React.useState(false);\n  return (\n    \u003c\u003e\n      {/* Uncontrolled version */}\n      \u003cButton color=\"pink\" onClick={() =\u003e setShow(!show)}\u003e\n        Open Modal\n      \u003c/Button\u003e\n      \u003cModal show={show}\u003e\n        \u003cModalDialog\u003e\n          \u003cModalContent\u003e\n            \u003cModalHead\u003e\n              \u003cModalTitle\u003eThis is the modal title, yo\u003c/ModalTitle\u003e\n              \u003cbutton\n                type=\"button\"\n                onClick={() =\u003e setShow(!show)}\n                className=\"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              \u003e\n                \u003cspan aria-hidden=\"true\"\u003e×\u003c/span\u003e\n              \u003c/button\u003e\n            \u003c/ModalHead\u003e\n            \u003cModalBody\u003e\n              \u003cp className=\"mb-100\"\u003e\n                A long time ago in a galaxy far, far away....\n              \u003c/p\u003e\n              \u003cp className=\"mb-100\"\u003e\n                The Normy Modal was just a normal-sized modal, working for the\n                better of the empire, day by day, being a loyal soldier, not\n                asking any questions, doing his part for empowering the empire.\n              \u003c/p\u003e\n            \u003c/ModalBody\u003e\n            \u003cModalFooter\u003e\n              \u003cButton color=\"pink\" onClick={() =\u003e setShow(!show)}\u003e\n                Save changes\n              \u003c/Button\u003e\n              \u003cButton color=\"gray\" onClick={() =\u003e setShow(!show)}\u003e\n                Close\n              \u003c/Button\u003e\n            \u003c/ModalFooter\u003e\n          \u003c/ModalContent\u003e\n        \u003c/ModalDialog\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\nProps:\n\n```\nModal.defaultProps = {\n  show: false\n};\n\nModal.propTypes = {\n  // send true to it to open the modal\n  show: PropTypes.bool,\n  children: PropTypes.node\n};\n\n\nModalBody.defaultProps = {};\n\nModalBody.propTypes = {\n  children: PropTypes.node\n};\n\n\nModalContent.defaultProps = {};\n\nModalContent.propTypes = {\n  children: PropTypes.node\n};\n\n\nModalDialog.defaultProps = {\n  size: \"default\"\n};\n\nModalDialog.propTypes = {\n  // size of the modal\n  size: PropTypes.oneOf([\"sm\", \"lg\", \"xl\", \"default\"]),\n  children: PropTypes.node\n};\n\n\nModalFooter.defaultProps = {};\n\nModalFooter.propTypes = {\n  children: PropTypes.node\n};\n\n\nModalHead.defaultProps = {};\n\nModalHead.propTypes = {\n  children: PropTypes.node\n};\n\n\nModalTitle.defaultProps = {};\n\nModalTitle.propTypes = {\n  children: PropTypes.node\n};\n```\n\n### Navbar\n\nUsage:\n\n```\n// uncontrolled version\nimport React from \"react\";\nimport {\n  Navbar,\n  NavbarBrand,\n  NavbarCollapse,\n  NavbarContainer,\n  NavbarItem,\n  NavbarLink,\n  NavbarNav,\n  NavbarToggler\n} from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cNavbar color=\"pink\"\u003e\n        \u003cNavbarContainer\u003e\n          \u003cNavbarBrand\u003eBrand text here\u003c/NavbarBrand\u003e\n          \u003cNavbarToggler expand=\"lg\" id=\"pink-navbar-toggler\"\u003e\n            \u003cspan aria-hidden=\"true\"\u003e⁝⁝⁝\u003c/span\u003e\n          \u003c/NavbarToggler\u003e\n          \u003cNavbarCollapse expand=\"lg\" toggler=\"#pink-navbar-toggler\"\u003e\n            \u003cNavbarNav expand=\"lg\"\u003e\n              \u003cNavbarItem\u003e\n                \u003cNavbarLink active\u003eActive Link\u003c/NavbarLink\u003e\n              \u003c/NavbarItem\u003e\n              \u003cNavbarItem\u003e\n                \u003cNavbarLink\u003eSimple Link\u003c/NavbarLink\u003e\n              \u003c/NavbarItem\u003e\n              \u003cNavbarItem\u003e\n                \u003cNavbarLink disabled\u003eDisabled Link\u003c/NavbarLink\u003e\n              \u003c/NavbarItem\u003e\n            \u003c/NavbarNav\u003e\n          \u003c/NavbarCollapse\u003e\n        \u003c/NavbarContainer\u003e\n      \u003c/Navbar\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n\n// controlled version\nimport React from \"react\";\nimport {\n  Navbar,\n  NavbarBrand,\n  NavbarCollapse,\n  NavbarContainer,\n  NavbarItem,\n  NavbarLink,\n  NavbarNav,\n  NavbarToggler\n} from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  const [show, setShow] = React.useState(false);\n  return (\n    \u003c\u003e\n      \u003cNavbar color=\"pink\"\u003e\n        \u003cNavbarContainer\u003e\n          \u003cNavbarBrand\u003eBrand text here\u003c/NavbarBrand\u003e\n          \u003cNavbarToggler expand=\"lg\" onClick={() =\u003e setShow(!show)}\u003e\n            \u003cspan aria-hidden=\"true\"\u003e⁝⁝⁝\u003c/span\u003e\n          \u003c/NavbarToggler\u003e\n          \u003cNavbarCollapse expand=\"lg\" controlled show={show}\u003e\n            \u003cNavbarNav expand=\"lg\"\u003e\n              \u003cNavbarItem\u003e\n                \u003cNavbarLink active\u003eActive Link\u003c/NavbarLink\u003e\n              \u003c/NavbarItem\u003e\n              \u003cNavbarItem\u003e\n                \u003cNavbarLink\u003eSimple Link\u003c/NavbarLink\u003e\n              \u003c/NavbarItem\u003e\n              \u003cNavbarItem\u003e\n                \u003cNavbarLink disabled\u003eDisabled Link\u003c/NavbarLink\u003e\n              \u003c/NavbarItem\u003e\n            \u003c/NavbarNav\u003e\n          \u003c/NavbarCollapse\u003e\n        \u003c/NavbarContainer\u003e\n      \u003c/Navbar\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\nProps:\n\n```\nNavbar.defaultProps = {\n  color: \"pink\",\n  menu: false\n};\n\nNavbar.propTypes = {\n  // if you do not want to use this component as a navbar,\n  // but as a small menu someplace in your page,\n  // you can add the menu prop on it\n  menu: PropTypes.bool,\n  // set the background and text color\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ]),\n  children: PropTypes.node\n};\n\n\nNavbarBrand.defaultProps = {};\n\nNavbarBrand.propTypes = {\n  children: PropTypes.node\n};\n\n\nNavbarCollapse.defaultProps = {\n  show: false,\n  controlled: false\n};\n\nNavbarCollapse.propTypes = {\n  // if you want to controll yourself the opening and closing of the collapse\n  show: PropTypes.bool,\n  controlled: PropTypes.bool,\n  // for controlled version,\n  // you need to pass this so that the component can be opnened and closed\n  // it has to come like \"#toggler-id\", where toggler-id can be any string\n  toggler: PropTypes.string,\n  // on which breakpoint should collapse be hidden\n  expand: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\"]),\n  children: PropTypes.node\n};\n\n\nNavbarContainer.defaultProps = {\n  size: \"fluid\"\n};\n\nNavbarContainer.propTypes = {\n  // set how large should the container be\n  size: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\", \"fluid\"]),\n  children: PropTypes.node\n};\n\n\nNavbarItem.defaultProps = {};\n\nNavbarItem.propTypes = {\n  children: PropTypes.node\n};\n\n\nNavbarLink.defaultProps = {\n  active: false,\n  disabled: false\n};\n\nNavbarLink.propTypes = {\n  // for active state\n  active: PropTypes.bool,\n  // for disabled state\n  disabled: PropTypes.bool,\n  children: PropTypes.node\n};\n\n\nNavbarNav.defaultProps = {};\n\nNavbarNav.propTypes = {\n  // from which breakpoint should the items be set in row (inline)\n  expand: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\"]),\n  children: PropTypes.node\n};\n\n\nNavbarToggler.defaultProps = {};\n\nNavbarToggler.propTypes = {\n  // from which breakpoint should toggler be hidden\n  expand: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\"]),\n  children: PropTypes.node\n};\n```\n\n### Popover\n\nUsage:\n\n```\n// controlled usage\nimport React from \"react\";\nimport { Button, Popover, PopoverHead, PopoverBody } from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  const [show, setShow] = React.useState(false);\n  return (\n    \u003c\u003e\n      {/* Uncontrolled version */}\n      \u003cButton color=\"pink\" id=\"popover-123456\"\u003e\n        Uncontrolled Popover\n      \u003c/Button\u003e\n      \u003cPopover target=\"#popover-123456\"\u003e\n        \u003cPopoverHead\u003eUncontrolled Popover\u003c/PopoverHead\u003e\n        \u003cPopoverBody\u003e\n          This is the Body of the Uncontrolled Popover, and the above is the\n          Title, man!\n        \u003c/PopoverBody\u003e\n      \u003c/Popover\u003e\n      \u003cbr /\u003e\n      \u003cbr /\u003e\n      {/* Controlled version */}\n      \u003cButton color=\"pink\" id=\"popover-654321\" onClick={() =\u003e setShow(!show)}\u003e\n        Controlled Popover\n      \u003c/Button\u003e\n      \u003cPopover\n        controlled\n        show={show}\n        placement=\"bottom\"\n        target=\"#popover-654321\"\n      \u003e\n        \u003cPopoverHead\u003eControlled Popover\u003c/PopoverHead\u003e\n        \u003cPopoverBody\u003e\n          This is the Body of the Controlled Popover, and the above is the\n          Title, man!\n        \u003c/PopoverBody\u003e\n      \u003c/Popover\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\nProps:\n\n```\nPopover.defaultProps = {\n  placement: \"top\",\n  controlled: false,\n  show: false\n};\n\nPopover.propTypes = {\n  // target is the ID of the element we want the popover to be associated to\n  target: PropTypes.string,\n  // where the Popover should be rendered\n  // NOTE: if there is no place for the popover to be rendered\n  //    on the choosen placement, PopperJS will rendered it\n  //    where it has place\n  placement: PropTypes.oneOf([\"top\", \"bottom\", \"left\", \"right\"]),\n  // if you want to controll the popover yourself\n  // and decide when to show it, and when to close it\n  // but you will still need to pass the target element\n  show: PropTypes.bool,\n  controlled: PropTypes.bool,\n  children: PropTypes.node\n};\n\n\nPopoverHead.defaultProps = {};\n\nPopoverHead.propTypes = {\n  children: PropTypes.node\n};\n\nPopoverBody.defaultProps = {};\n\nPopoverBody.propTypes = {\n  children: PropTypes.node\n};\n```\n\n### Tooltip\n\nUsage:\n\n```\n// controlled usage\nimport React from \"react\";\nimport { Button, Tooltip } from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  const [show, setShow] = React.useState(false);\n  return (\n    \u003c\u003e\n      {/* Uncontrolled version */}\n      \u003cButton color=\"pink\" id=\"tooltip-123456\"\u003e\n        Uncontrolled Tooltip\n      \u003c/Button\u003e\n      \u003cTooltip target=\"#tooltip-123456\"\u003eUncontrolled Tooltip\u003c/Tooltip\u003e\n      \u003cbr /\u003e\n      \u003cbr /\u003e\n      {/* Controlled version */}\n      \u003cButton\n        color=\"pink\"\n        id=\"tooltip-654321\"\n        onMouseEnter={() =\u003e setShow(!show)}\n        onMouseLeave={() =\u003e setShow(!show)}\n      \u003e\n        Controlled Tooltip\n      \u003c/Button\u003e\n      \u003cTooltip\n        controlled\n        show={show}\n        placement=\"bottom\"\n        target=\"#tooltip-654321\"\n      \u003e\n        Controlled Tooltip\n      \u003c/Tooltip\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n\n```\n\nProps:\n\n```\nTooltip.defaultProps = {\n  placement: \"top\",\n  controlled: false,\n  show: false\n};\n\nTooltip.propTypes = {\n  // target is the ID of the element we want the tooltip to be associated to\n  target: PropTypes.string,\n  // where the Tooltip should be rendered\n  // NOTE: if there is no place for the tooltip to be rendered\n  //    on the choosen placement, PopperJS will rendered it\n  //    where it has place\n  placement: PropTypes.oneOf([\"top\", \"bottom\", \"left\", \"right\"]),\n  // if you want to controll the tooltip yourself\n  // and decide when to show it, and when to close it\n  // but you will still need to pass the target element\n  show: PropTypes.bool,\n  controlled: PropTypes.bool,\n  children: PropTypes.node\n};\n```\n\n### Tab Pills\n\nUsage:\n\n```\n// uncontrolled version\nimport React from \"react\";\nimport { TabContainer, TabItem, TabLink, TabContent } from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cTabContainer color=\"pink\"\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink target=\"#tab-id-1\"\u003eSimple\u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink target=\"#tab-id-2\" active\u003e\n            Active\n          \u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink target=\"#tab-id-3\"\u003eSimple\u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink target=\"#tab-id-4\" disabled\u003e\n            Disabled\n          \u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n      \u003c/TabContainer\u003e\n      \u003cTabContent id=\"tab-id-1\"\u003e\n        \u003cp\u003e\n          Collaboratively administrate empowered markets via plug-and-play\n          networks. Dynamically procrastinate B2C users after installed base\n          benefits.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Dramatically visualize customer directed convergence without\n          revolutionary ROI.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n      \u003cTabContent id=\"tab-id-2\"\u003e\n        \u003cp\u003e\n          Completely synergize resource taxing relationships via premier niche\n          markets. Professionally cultivate one-to-one customer service with\n          robust ideas.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Efficiently unleash cross-media information without cross-media value.\n          Quickly maximize timely deliverables for real-time schemas.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n      \u003cTabContent id=\"tab-id-3\"\u003e\n        \u003cp\u003e\n          Efficiently unleash cross-media information without cross-media value.\n          Quickly maximize timely deliverables for real-time schemas.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Dramatically maintain clicks-and-mortar solutions without functional\n          solutions.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n      \u003cTabContent id=\"tab-id-4\"\u003e\n        \u003cp\u003e\n          Completely synergize resource taxing relationships via premier niche\n          markets. Professionally cultivate one-to-one customer service with\n          robust ideas.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Efficiently unleash cross-media information without cross-media value.\n          Quickly maximize timely deliverables for real-time schemas.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\n```\n// controlled version\n// on the controlled version you will have to send the color\n// of each tab-link individualy, the color from the tab-container\n// will no longer be applied :(\nimport React from \"react\";\nimport { TabContainer, TabItem, TabLink, TabContent } from \"@afc-org/react-tailwind\";\n\nconst YourComponent = () =\u003e {\n  const [active, setActive] = React.useState(\"tab-id-2\");\n  const toggleActiveTab = tab =\u003e {\n    setActive(tab);\n  };\n  return (\n    \u003c\u003e\n      {/* the color on the container does nothing on the controlled version */}\n      \u003cTabContainer controlled color=\"blue\"\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink\n            color=\"pink\"\n            target=\"#tab-id-1\"\n            active={active === \"tab-id-1\"}\n            onClick={() =\u003e toggleActiveTab(\"tab-id-1\")}\n          \u003e\n            Simple\n          \u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink\n            color=\"pink\"\n            target=\"#tab-id-2\"\n            active={active === \"tab-id-2\"}\n            onClick={() =\u003e toggleActiveTab(\"tab-id-2\")}\n          \u003e\n            Active\n          \u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink\n            color=\"pink\"\n            target=\"#tab-id-3\"\n            active={active === \"tab-id-3\"}\n            onClick={() =\u003e toggleActiveTab(\"tab-id-3\")}\n          \u003e\n            Simple\n          \u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n        \u003cTabItem\u003e\n          \u003cTabLink\n            color=\"pink\"\n            target=\"#tab-id-4\"\n            disabled\n            active={active === \"tab-id-4\"}\n            onClick={() =\u003e toggleActiveTab(\"tab-id-4\")}\n          \u003e\n            Disabled\n          \u003c/TabLink\u003e\n        \u003c/TabItem\u003e\n      \u003c/TabContainer\u003e\n      \u003cTabContent id=\"tab-id-1\" active={active === \"tab-id-1\"}\u003e\n        \u003cp\u003e\n          Collaboratively administrate empowered markets via plug-and-play\n          networks. Dynamically procrastinate B2C users after installed base\n          benefits.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Dramatically visualize customer directed convergence without\n          revolutionary ROI.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n      \u003cTabContent id=\"tab-id-2\" active={active === \"tab-id-2\"}\u003e\n        \u003cp\u003e\n          Completely synergize resource taxing relationships via premier niche\n          markets. Professionally cultivate one-to-one customer service with\n          robust ideas.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Efficiently unleash cross-media information without cross-media value.\n          Quickly maximize timely deliverables for real-time schemas.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n      \u003cTabContent id=\"tab-id-3\" active={active === \"tab-id-3\"}\u003e\n        \u003cp\u003e\n          Efficiently unleash cross-media information without cross-media value.\n          Quickly maximize timely deliverables for real-time schemas.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Dramatically maintain clicks-and-mortar solutions without functional\n          solutions.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n      \u003cTabContent id=\"tab-id-4\" active={active === \"tab-id-4\"}\u003e\n        \u003cp\u003e\n          Completely synergize resource taxing relationships via premier niche\n          markets. Professionally cultivate one-to-one customer service with\n          robust ideas.\n        \u003c/p\u003e\n        \u003cp\u003e\n          Efficiently unleash cross-media information without cross-media value.\n          Quickly maximize timely deliverables for real-time schemas.\n        \u003c/p\u003e\n      \u003c/TabContent\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\nProps:\n\n```\nTabContainer.defaultProps = {\n  color: \"pink\",\n  controlled: false\n};\n\nTabContainer.propTypes = {\n  // if you want to controll the behavior yourself\n  controlled: PropTypes.bool,\n  // set the background, border and text color for the tab-link\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ]),\n  children: PropTypes.node\n};\n\n\nTabContent.defaultProps = {\n  active: false\n};\n\nTabContent.propTypes = {\n  show: PropTypes.bool,\n  id: PropTypes.string.isRequired,\n  children: PropTypes.node\n};\n\n\nTabItem.defaultProps = {};\n\nTabItem.propTypes = {\n  children: PropTypes.node\n};\n\n\nTabLink.defaultProps = {\n  disabled: false,\n  active: false,\n  color: \"white\"\n};\n\nTabLink.propTypes = {\n  disabled: PropTypes.bool,\n  active: PropTypes.bool,\n  // set the background, border and text color for the tab-link\n  color: PropTypes.oneOf([\n    \"black\",\n    \"white\",\n    \"gray\",\n    \"red\",\n    \"orange\",\n    \"yellow\",\n    \"green\",\n    \"teal\",\n    \"blue\",\n    \"indigo\",\n    \"purple\",\n    \"pink\"\n  ]),\n  // the tab-content that will be displayed by pressing this tab-link\n  target: PropTypes.string.isRequired,\n  children: PropTypes.node\n};\n```\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 `index.js` file (mounting js file for your app) like so:\n```\nimport \"path/to/your/tailwindcss/compiled/styles.css\";\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/react-tailwind** to properly work needs the following dependencies:\n- **@popperjs/core**@2.2.1\n- **react**@16.13.1\n- **react-dom**@16.13.1\n```\nnpm i -E @popperjs/core@2.2.1 react@16.13.1 react-dom@16.13.1\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/react-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/react-tailwind\n\n- Licensed under \u003ca href=\"https://github.com/afc-org/react-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/react-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%2Freact-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafc-org%2Freact-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafc-org%2Freact-tailwind/lists"}