bbg / tailwind-system-props

Apply tailwind utility classes using Styled System-like props [WIP]

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', 'pink']} />

will output something like

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

API

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

Usage

Create a Box

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

function Box({ as = 'div', ...props }) {
  return React.createElement(as, props)
}

export default compose(color, space)(Box)

now, use the Box

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

Advanced

Let's say we want to change a button component's size based on conditional breakpoints.

Start with a button component with size utilties wrapped in a @responsive directive. This directive allows you to use these styles conditionally at different breakpoints.

.btn {
  @apply bg-purple text-white px-md;
}

@responsive {
  .btn-sm {
    @apply py-sm;
  }

  .btn-md {
    @apply py-md;
  }

  .btn-lg {
    @apply py-lg;
  }
}

You can use toTailwindClasses to pass the Tailwind class name (e.g., btn) and value (or array of values for responsive classes) to create custom Tailwind classes.

import React  from 'react'
import { toTailwindClasses } from 'tailwind-system-props'

function Button({ size, ...props }) {
  const fromSize = toTailwindClasses('btn', size)
  return <button className={`btn ${fromSize}`} {...props}>
}

// Usage
<Button size={['md', 'lg']}>Save</Button>

will output something like

<button class="btn btn-md sm:btn-lg">Save</button>