tailwind-system-props v0.0.0-beta.2

Tailwind System Props

Apply Tailwind CSS utility classes using Styled System-like props.

Getting Started

yarn add tailwind-system-props

Add props to your React components to help you quickly build UIs.

In Tailwind, utility classes can be applied conditionally at different breakpoints. We can use props that accept arrays as values for mobile-first responsive styles.

<Box fontSizes={['sm', 'md']} bg={['green', 'purple']} />

will output something like

<div class="sm:text-sm md:text-md sm:bg-green md:bg-purple" />

API

import { color, compose, layout, size, space } from 'tailwind-system-props'

Usage

Create a Box

import { color, compose, space } from 'tailwind-system-props'

function Box(props) {
  return <div {...props} />
}

export default compose(color, space)(Box)

now, use the Box

<Box bg="green-400" p="md" m="sm" />