To install the [npm package](https://www.npmjs.com/package/tailwind-react-ui) run the following within your project directory.

```bash
npm i tailwind-react-ui
```

Note that the library doesn't provide any styling out of the box, `tailwindcss` is a peer dependency so it's necessary to also follow the instructions at https://tailwindcss.com/docs/installation.

### TailwindCSS Plugins

React Tailwind makes use of plugins to add additional functionality within components (e.g. a `.visually-hidden` utility class to render content for screen readers only).

```js static
const plugins = require('tailwind-react-ui/plugins')

module.exports = {
  // ...project config
  plugins: [
    require('tailwindcss/plugins/container')({}),
    ...Object.keys(plugins).map(name => plugins[name]()),
  ],
}
```

### PurgeCSS

If you are using [PurgeCSS](https://github.com/FullHuman/purgecss) then there are specific tools available to assist in allowing PurgeCSS to parse Tailwind React UI props and also whitelist class names generated by the library based off of `theme` values. See the config below for how to use these when setting up PurgeCSS.

```js static
import { getWhitelist, TailwindReactExtractor } from 'tailwind-react-ui'

new PurgecssPlugin({
  whitelist: getWhitelist({
    // project's tailwind-react-ui theme
  }, [
    // project specific selector whitelist
  ]),
  paths:  glob.sync([
    // glob of jsx directory
  ]),
  extractors: [
    {
      extractor: TailwindReactExtractor,
      extensions: ['js', 'jsx'],
    },
  ],
}),
```