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 stitchwind

If 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.