useTailwind

Gzipped (non minified) size: ~4k. The raw size is large due to included types for tailwind class names.

Installation

pnpm add react-use-tailwind

Assumes that you have tailwind installed on your project. See the example directory for a bare bones vite react tailwind setup.

Description

A hook that allows you to use tailwind class names as top level properties on react components. With an included Stack component which implements the hook and is provided for convenience. The example from the tailwind docs becomes:

import { Stack } from 'react-use-tailwind';

const App = () {
  return (
    <Stack as="h1" text-3xl font-bold underline>
      Hello world!
    </Stack>
  )
}

export default App;

In the Stack component flex is defaulted to true

Hook Usage

import React from 'react';

import useTailwind, { type TailwindPropsWithChildren } from 'react-use-tailwind';

interface MyTailwindComponentProps extends TailwindPropsWithChildren {}

const MyTailwindComponent: React.FC<MyTailwindComponentProps> = (tailwindProps) => {
  const [classNames, props] = useTailwind(tailwindProps);

  return (
    <div className={classNames} {...props} />
  )
}

export default MyTailwindComponent;

Limitations

• Tailwind class names with illegal characters (::, /, etc) still have to be put into the classNames prop.