{"id":13516259,"url":"https://github.com/emortlock/tailwind-react-ui","last_synced_at":"2025-03-31T06:30:32.074Z","repository":{"id":38239619,"uuid":"144245109","full_name":"emortlock/tailwind-react-ui","owner":"emortlock","description":"React utility component primitives \u0026 UI framework for use with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2022-12-29T19:58:38.000Z","size":5248,"stargazers_count":274,"open_issues_count":26,"forks_count":37,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-28T18:22:03.466Z","etag":null,"topics":["react","react-components","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://emortlock.github.io/tailwind-react-ui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emortlock.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-10T06:19:43.000Z","updated_at":"2024-01-15T14:35:38.000Z","dependencies_parsed_at":"2023-01-31T09:45:52.618Z","dependency_job_id":null,"html_url":"https://github.com/emortlock/tailwind-react-ui","commit_stats":null,"previous_names":["emortlock/tailwind-react"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emortlock%2Ftailwind-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emortlock%2Ftailwind-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emortlock%2Ftailwind-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emortlock%2Ftailwind-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emortlock","download_url":"https://codeload.github.com/emortlock/tailwind-react-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429459,"owners_count":20775805,"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":["react","react-components","tailwind","tailwindcss"],"created_at":"2024-08-01T05:01:20.806Z","updated_at":"2025-03-31T06:30:30.497Z","avatar_url":"https://github.com/emortlock.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Tailwind React UI\n\n[![CircleCI](https://circleci.com/gh/emortlock/tailwind-react-ui.svg?style=svg)](https://circleci.com/gh/emortlock/tailwind-react-ui)\n\n---\n\n**NB:** As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until a v1 release is solidified. Expect breaking changes to occur on minor version jumps.\n\n---\n\nTailwind React UI provides ready built components that make use of [Tailwind CSS](https://tailwindcss.com/) utility framework.\n\nIf you're unfamiliar with the concepts behind Tailwind you can get an overview at https://tailwindcss.com/docs/what-is-tailwind:\n\n\u003e Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.\n\u003e Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces.\n\nTailwind React UI leverages these utility classes to provide base level components that are common across various projects, whilst still offering the ability to customise the output to match your project's style.\n\n## Features\n\n### No Built in Styles\n\nTailwind React UI's components have no inline/encapsulated styles (barring some use for CSS transitions), so there's no specificity issues, no new CSS in JS tool chain to apply. The library simply uses classes made available by [Tailwind CSS](https://tailwindcss.com/) that your whole app will make use of with hooks available to specify which classes are applied.\n\n### Utility Class Props\n\nIntroduces a [props API](https://emortlock.github.io/tailwind-react-ui/#usage) for Tailwind's uitlity classes that allows for extensive customisation \u0026 quick prototyping\n\n- Bring this functionality to your own components through the `withTailind` higher order component or by using the component primitives to have that handled down wind\n\n### Configurable Theme\n\nHas a [configurable theme](https://emortlock.github.io/tailwind-react-ui/#theming) to apply a design system approach for the base styling of components\n\n- Uses [React context](https://reactjs.org/docs/context.html) in order to allow for customising which color / space / etc classes get applied by default\n\n- Can still leverage the utility props in all components to override the default styling in whatever way you wish with sensible defaults applied in relevent components, e.g. `\u003cFillButton bg=\"purple-dark\" text=\"white\" /\u003e` will also apply interactive styling to the resulting element `\u003cbutton className=\"bg-purple text-white hover:bg-purple-darker focus:bg-purple-darker\" /\u003e`\n\n### Composable Components\n\nTailwind React UI's suite of components are highly composable allowing for a large degree of flexibility.\n\n- Components are largely functional, but where applicable offer wrappers to control UI state for opening/closing/etc.\n\n- Components have accessibility best practices built in; inputs will read out related help/error text, toggleable components correctly call out their open state, etc\n\n### PurgeCSS Support\n\n[PurgeCSS](https://github.com/FullHuman/purgecss) is a key tool when using TailwindCSS to strip out any of the unused utilities and to avoid any complications with this the library provides a whitelist of classes your theme will generate from components as well as a custom extractor that parses the utility class props API used by the components.\n\n## Example\n\n### Using Utility Components\n\n```jsx\n\u003cBox maxW=\"md\" m={{ x: 'auto' }}\u003e\n  \u003cBox border shadow bg=\"white\"\u003e\n    \u003cBox p={4}\u003e\n      \u003cText is=\"h1\" text={['blue', 'xxl']} m={{ b: 4 }}\u003e\n        Hello World\n      \u003c/Text\u003e\n    \u003c/Box\u003e\n    \u003cFlex items=\"end\" wrap reverse\u003e\n      \u003cTouchable\n        p={{ x: 4, y: 2 }}\n        border={[true, 'transparent']}\n        bg=\"blue\"\n        bg-hocus=\"blue-dark\"\n        text=\"white\"\n        w=\"full\"\n        w-sm=\"1/5\"\n      \u003e\n        Foo\n      \u003c/Touchable\u003e\n      \u003cTouchable\n        p={{ x: 4, y: 2 }}\n        border={[true, 'blue']}\n        text=\"blue\"\n        text-hocus=\"white\"\n        bg-hocus=\"blue\"\n        w=\"full\"\n        w-sm=\"1/5\"\n      \u003e\n        Bar\n      \u003c/Touchable\u003e\n    \u003c/Flex\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n```\n\n### Using UI Components\n\n```jsx\n\u003cContainer maxW=\"md\"\u003e\n  \u003cCard border shadow\u003e\n    \u003cCardBody\u003e\n      \u003cTitle size={6} text=\"blue\"\u003e\n        Hello World\n      \u003c/Title\u003e\n    \u003c/CardBody\u003e\n    \u003cCardFooter wrap\u003e\n      \u003cFillButton brand=\"primary\" w=\"full\" w-sm=\"1/5\"\u003e\n        Foo\n      \u003c/FillButton\u003e\n      \u003cOutlineButton brand=\"primary\" w=\"full\" w-sm=\"1/5\"\u003e\n        Bar\n      \u003c/OutlineButton\u003e\n    \u003c/CardFooter\u003e\n  \u003c/Card\u003e\n\u003c/Container\u003e\n```\n\n## Useful Links\n\n- [GitHub](https://github.com/emortlock/tailwind-react-ui)\n\n- [Documentation](https://emortlock.github.io/tailwind-react-ui/#documentation)\n\n- [Component demos](https://emortlock.github.io/tailwind-react-ui/#utility-components)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femortlock%2Ftailwind-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femortlock%2Ftailwind-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femortlock%2Ftailwind-react-ui/lists"}