Need help with tailwind-react-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

239 Stars 32 Forks 155 Commits 12 Opened issues


React utility component primitives & UI framework for use with Tailwind CSS

Services available


Need anything else?

Contributors list

# 177,438
126 commits
# 198
18 commits
# 108,660
1 commit

Tailwind React UI


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.

Tailwind React UI provides ready built components that make use of Tailwind CSS utility framework.

If you're unfamiliar with the concepts behind Tailwind you can get an overview at

Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc. Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces.

Tailwind 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.


No Built in Styles

Tailwind 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 that your whole app will make use of with hooks available to specify which classes are applied.

Utility Class Props

Introduces a props API for Tailwind's uitlity classes that allows for extensive customisation & quick prototyping

  • Bring this functionality to your own components through the
    higher order component or by using the component primitives to have that handled down wind

Configurable Theme

Has a configurable theme to apply a design system approach for the base styling of components

  • Uses React context in order to allow for customising which color / space / etc classes get applied by default

  • 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.

     will also apply interactive styling to the resulting element 

Composable Components

Tailwind React UI's suite of components are highly composable allowing for a large degree of flexibility.

  • Components are largely functional, but where applicable offer wrappers to control UI state for opening/closing/etc.

  • Components have accessibility best practices built in; inputs will read out related help/error text, toggleable components correctly call out their open state, etc

PurgeCSS Support

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.


Using Utility Components

        Hello World

Using UI Components

        Hello World

Useful Links

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.