0.1.5 • Published 3 years ago
tailwind-props v0.1.5
Tailwind Props
Storybook
React prop bindings for Tailwind Utility Classes
import { Box } from 'tailwind-props';
const Card = () => (
<Box flex p={2} h={6}>
Card Content
</Box>
// gets turned into
<div className="flex p-2 h-6">
Card Content
</div>
)
Get Started
yarn install tailwind-props
# or
npm install tailwind-props
# Then install Tailwind dependencies, following these directions if needed:
# https://tailwindcss.com/docs/installation
yarn install tailwindcss
Usage
/* ./styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// in the root of your app, import your Tailwind styles:
import '../styles/index.css';
import { Box } from 'tailwind-props';
const NavItem = ({ children }) => (
<Box block px={4} py={2} rounded="md" bg="amber-100" text="amber-700">
{children}
</Box>
)
const MenuButton = ({ children }) => (
<Box as="button" font="sans" rounded="lg" bg="purple-100" textColor="purple-700" px={6} py={2}>
Check Availability
</Box>
)
Why does this exist?
While TailwindCSS on its own works perfectly well with React, there are a few ways it could be improved to better fit the React model.
Easier Composability
The biggest limitation of TailwindCSS on its own is that it relies entirely on strings for an element's class
.
While you can extract styles within Tailwind, the common React pattern for this is using objects and defaults to compose similar elements.
// default TailwindCSS (without using @apply to extract)
const BaseButton = ({ className }) => (
// string concatenation this way is more fragile than merging objects and will also cause duplicate classNames to be added
<button className={`px-5 py-3 rounded-md text-white bg-indigo-600 ${className}`}>
Primary Button
</button>
)
const SecondaryButton = () => (
<BaseButton className="text-indigo-600 bg-white border border-indigo-600">
Secondary Button
</BaseButton>
)
// Using Tailwind Props
const BaseButton = (props) => (
// pass down all props to allow additional styles to be merged in
<Button px={5} py={3} rounded="md" text="white" bg="indigo-600" {...props}>
Primary Button
</Button>
)
const SecondaryButton = () => (
// pass down props to override base button styles
<BaseButton text="indigo-600" bg="white" border="indigo-600" >
Secondary Button
</BaseButton>
)
Simplifying Syntax
Since we're (currently) stuck typing out className
in React, it can make tailwind a bit clunkier.
By mapping out Tailwind utilities to props, we can simplify the syntax a good amount:
// vanilla tailwind
<button className="px-5 py-3 rounded-md">
Click Here
</button>
// Tailwind Props
<Button px={5} py={3} rounded="md">
Click Here
</Button>
Typescript
TO DO:
(From Highest to Lowest Priority)
Figure out approach for pseudo classes / states (:hover, :active, :disabled) and responsive styles
Create custom PurgeCSS Extractor to optimize for production
Will require a custom PurgeCSS extractor / function
Remaining Props:
- Color Utilities
- Text Color
- Background Color
- Font Family
- Font Weight
- Text Align
- Alignment (justify-content, align-items)
- Text Transform
- Border Width
- Border Color
- Border Radius
- Box Shadow
- Cursor
- Container