This library helps bridge the gap between Tailwind and Stitches. Considering Stitches was somewhat inspired by Tailwind, I thought we should be able to use the design tokens and utilities from Stitches' progenitor.
npm install stitchwindIf you don't want to customize Stitchwind at all you can just simply pass it to Stitches' createStyled method to create your Stitches' functions.
import stitchwind from 'stitchwind'
import { createStyled } from '@stitches/react'
export const { styled, css } = createStyled(stitchwind) import stitchwind, { usePrefix } from 'stitchwind'
import { createStyled } from '@stitches/react'
const customPrefixedConfig = usePrefix('@', stitchwind);
export const { styled, css } = createStyled(customPrefixedConfig);Currently Stitchwind only supports tokens and breakpoints from Tailwind. Utilities to come soon.
Every breakpoint is loaded from Tailwind, $sm through $xl
Every color and color scale is loaded ie. $black or $indigo600 into Stitches' colors token.
Every spacing size is loaded ie. $0 through $64 and $px
Sizes are loaded using the set from Tailwind's width property. This allows for everything from spacing plus all the fractional sizes $1/2 through $11/12 and $auto, $full, and $screen. Currently screen is equivalent to 100vw but may later be transformed into $screenH and $screenW with the respective viewport units used for each.
Fonts from Tailwind are loaded as comma delimited strings and include $sans, $serif, and $mono
Every font weight is loaded, $hairline through $black
Every font size is loaded, $xs through $6xl
Every line height is loaded, $3 through $10 and $none through $loose
Every letter spacing is loaded, $tighter through $widest
Every border width is loaded, $0 through $8 including $default for 1px
Every border radii is loaded, $none through $full
Every box shadow is loaded, $xs through $2xl, $inner, $outline, and $none
Every z-index is loaded, $0 through $50 and $auto
Licensed under the MIT License, Copyright © 2020-present Hunter Miller.
See LICENSE for more information.