# react-tailwind-quickstyle

> A utility function to create styled React components with Tailwind CSS with less boilerplate

Latest version **0.11.0** (published 2021-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tailwind-quickstyle
pnpm add react-tailwind-quickstyle
yarn add react-tailwind-quickstyle
bun add react-tailwind-quickstyle
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.11.0 |
| Published | 2021-12-02 |
| First published | 2021-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rubin Jhand |
| Maintainers | obelus |
| Keywords | typescript, react, tailwind, styled |

## Links

- npm: https://www.npmjs.com/package/react-tailwind-quickstyle
- Repository: https://github.com/RubinJhand/react-tailwind-quickstyle
- Homepage: https://github.com/RubinJhand/react-tailwind-quickstyle#readme
- Issues: https://github.com/RubinJhand/react-tailwind-quickstyle/issues
- npm.io page: https://npm.io/package/react-tailwind-quickstyle

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.11.0 (latest) — 2021-12-02

## README

# react-tailwind-quickstyle

A utility function to create styled React components with Tailwind CSS with less boilerplate.

<img src="./assets/example.png" alt="Example of package capabilties" width="700">

## Motivation

Styled Components have the ability to be designed and extended. Tailwind CSS allows for rapid development. The intention is for a better developer experience for prototyping by combining the two features.

```jsx
import styled from 'styled-components';

export const Image = styled.img`
  position: relative;
  object-fit: contain;
  width: 100%;
  border-radius: 6px;
`;
```

Source: [Mamba UI](https://mambaui.com/components/card)

```jsx
  <div className="max-w-xs p-6 rounded-md shadow-md dark:bg-coolGray-900 dark:text-coolGray-50">
    <img src="https://source.unsplash.com/300x300/?random" alt="" className="object-cover object-center w-full rounded-md h-72 dark:bg-coolGray-500">
    <div className="mt-6 mb-2">
      <span className="block text-xs font-medium tracking-widest uppercase dark:text-violet-400">Quisque</span>
      <h2 className="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
    </div>
    <p className="dark:text-coolGray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
  </div>
```

## Requirements

React: v17

Tailwind CSS: 2.2

## Installation

```
npm i react-tailwind-quickstyle
```

## Usage

```jsx
const Component = base(element, className, children);
```

The `base` function defaults to a `div` element if parameters are not provided.

### Examples:

`Container`, `Form`, and `Input` components:

```jsx
import { base } from 'react-tailwind-quickstyle';

const Input = base('input', 'w-full');
const Form = base('form', 'm-5 col-span-3');
const Container = base('div', 'grid grid-cols-3');

const Login = ()=>{

  return (
    <Container>
      <Form onSubmit={}>
      <Input type='text' />
      </Form>
    </Container>
  )
}
```

### Component styles may be expanded:

```jsx
import { base } from 'react-tailwind-quickstyle';

const Input = base('input', 'w-full');
const Form = base('form', 'm-5 col-span-3');
const Container = base('div', 'grid grid-cols-3');

const Login = ()=>{

  return (
    <Container className='mx-5 my-3'>
      <Form onSubmit={}>
      <Input type='text' />
      </Form>
    </Container>
  )
}
```

The `Container` component is now equivalent to:

```jsx
<Container className='mx-5 my-3 grid grid-cols-3'>...</Container>
```

### Components may be nested:

```jsx
const Span = base(
  'span',
  'block text-xs font-medium tracking-widest uppercase dark:text-violet-400',
  'Quisque'
);

const H2 = base(
  'h2',
  'text-xl font-semibold tracking-wide',
  'Nam maximus purus'
);

const TextWrapper = base(
  'img',
  'mt-6 mb-2',
  <>
    <Span />
    <H2 />
  </>
);

const SomeComponent = () => {
  return <TextWrapper />;
};
```

However, changing the children props of `Span` and `H2` within `SomeComponent` would be more difficult after nesting, so it is not recommended to nest if the children props may change.

### Forwarding Refs

All components created with the `base` function have [forwardRef](https://reactjs.org/docs/forwarding-refs.html) included and a `ref` prop is available:

```jsx
import { base } from 'react-tailwind-quickstyle';

const Input = base('input', 'w-full');
const Form = base('form', 'm-5 col-span-3');
const Container = base('div', 'grid grid-cols-3');

const Login = ()=>{
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <Container>
      <Form onSubmit={}>
      <Input ref={inputRef} type='text' />
      </Form>
    </Container>
  )
}
```

### Extra: A version of a Polymorphic Component

[forwardRef](https://reactjs.org/docs/forwarding-refs.html) included. (not illustrated in example below)

```jsx
import * as React from 'react';

import { Box } from 'react-tailwind-quickstyle';

const Example = () => {
  return (
    <>
      <Box
        as='button'
        type='button'
        className='px-3 py-2 m-10 bg-blue-500 hover:bg-blue-300 text-white uppercase'
      >
        box button
      </Box>
    </>
  );
};
```

---
_Source: https://npm.io/package/react-tailwind-quickstyle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._