tailwind-react-utils

This package translates Tailwind utilities into types and class objects that you can use in a more React-friendly way.

Table of Contents

• Installation
• Usage

Installation

Using npm:

$ npm i tailwind-react-utils

Using yarn:

$ yarn add tailwind-react-utils

Usage

As props

// MyTypographyComponent.tsx

import { ITextAlign, TextAlignClass } from "tailwind-react-utils";

interface Props {
  align?: ITextAlign; // "left" | "center" | "right" | "justify"
}

const MyTypographyComponent = ({ align = "left" }: Props) => (
  <p className={TextAlignClass[align]}>{children}</p>
);

// App.tsx

const App = () => (
  <div>
    <MyTypographyComponent align="right">Hello</MyTypographyComponent>
  </div>
);

Class objects

Each utility comes with a corresponding class object that returns the Tailwind class.

type IAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';

const class = AlignItemsClass.start;

console.log(class);
// items-start

generateClasses

generateClasses is a helper function.

import { generateClasses } from "tailwind-react-utils";

const classes = generateClasses({
  display: "inline-flex",
  flexWrap: "nowrap",
  gridTemplateColumns: 4,
});

console.log(classes);
// "inline-flex flex-nowrap grid-cols-4"

Each property is typed.

You can also pass in the rest of your props and it will return the Tailwind classes. You can also use destructuring to only get the props you need, and pass the rest into the generateClasses function.

// Flexbox.tsx

import { IFlexbox } from "tailwind-react-utils";

interface Props extends IFlexbox {
  children: React.ReactNode;
}

const MyBoxComponent = ({ children, ...rest }: Props) => (
  <div className={generateClasses(rest)}>{children}</div>
);

Classes will only be returned for the props that are defined.

// App.tsx

const App = () => (
  <MyBoxComponent flex="initial" alignItems="end">
    Hello
  </MyBoxComponent>
);

MyBoxComponent will only have the IFlex and IAlignItems classes because these are the only flexbox props that are defind.

Note that generateClasses only works with utilities provided by the tailwind-react-utils package. You may have your own custom prop name. Rather than using justifyContent as the prop name for the IJustifyContent utility, you may want to call it just justify. You may also want to call the number of columns cols instead of gridTemplateColumns.

import {
  IGrid,
  IJustifyContent,
  IGridTemplateColumns,
  generateClasses,
} from "tailwind-react-utils";

interface Props extends IGrid {
  children: React.ReactNode;
  justify?: IJustifyContent;
  cols?: IGridTemplateColumns;
}

const MyGridComponent = ({
  children,
  justify = "between",
  cols = 3,
  ...rest
}: Props) => (
  <div
    className={generateClasses({
      ...rest,
      justifyContent: justify,
      gridTemplateColumns: cols,
    })}
  >
    {children}
  </div>
);