⚠ These docs are a WIP ⚠
A helper library for Zaftig (CSS in JS) that brings some of the main utilities from Tailwind CSS.
import z from 'zaftig'
import { colors, helpers } from 'zaftig-tailwind'
z.global(colors) // register color variables
z.helper(helpers) // register helpers
z.global`
font-sans
c $gray-8
pad 3
@between sm md {
a { c $green-5 }
}
`
Tailwind CSS provides utilities to set padding/margin in increments of 0.25rem
.
You achieve the same using the helpers mar
/ pad
The first argument to the helper is a number and will be multiplied by 0.25rem
, the second optional argument is the directions to apply the margin/padding to. t
is top, b
is bottom, l
is left, and r
is right.
pad 3 === padding: 0.75rem
mar 10 === margin: 2.5rem
pad 2 lrt === padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem
z`
pad 3
mar 10
pad 3 lr
mar 10 tlr
`
Zaftig Tailwind provides 3 basic font-family
helpers, font-sans
, font-serif
and font-mono
. Use to apply good looking web-safe fonts of the particular type.
The text
helper provides a series of preset font-size
s based on what Tailwind CSS provides. It accepts a single argument specifying the size which can be: xs
, sm
, base
, lg
, xl
, 2xl
, 3xl
, 4xl
, 5xl
, or 6xl
.
z`
font-sans
text xl
`
Applies a given intensity/type of box-shadow. This helper takes one param which is one of the following values: base
, md
, lg
, xl
, 2xl
, inner
, outline
, none
.
z`shadow lg`
// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
This helper doesn't take params and simply applies 0.25rem
of border-radius.
z`rounded`
// border-radius: 0.25rem;
This helper takes 2 params, width
and height
in px
if not specified. If only 1 param is provided the same value will be used for both width
and height
.
z`
size 40
size 100 200
size 20rem
`
Tailwind's whole palette of colors are provided as css variables. Since they're variables they can easily be used with any CSS property.
See here for the full list of available colors.
The color variables are not loaded by default, allowing you to import them and load them at whatever scope you like.
import { colors } from 'zaftig-tailwind'
// load the colors into the global scope
z.global(colors)
// use them in a style
z`
color $blue-2
background-color $green-5
border 1 solid $red-5
`
Since the colors are just css variables you can easily redefine them as follows:
import { colors } from 'zaftig-tailwind'
// load colors into global scope and redefine blue-2
z.global`
${colors}
$blue-2 #4299E1
`
The defaults provided by this library can easily be changed if so desired. Several of the value maps are exported by the library and can simply be mutated.
import { breakpoints, shadowMap, textSizes } from 'zaftig-tailwind'
breakpoints.md = '900px'
shadowMap.outline = '0 0 0 10px rgba(66, 153, 225, 0.5)'
textSizes.lg = '1.5rem'
The properties of the object matchup to the possible values of the relevant helpers.