Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthyn/stitchwind
A bridge between Tailwind and Stitches
https://github.com/arthyn/stitchwind
css-in-js design-system design-tokens stitches tailwind tailwindcss
Last synced: 3 months ago
JSON representation
A bridge between Tailwind and Stitches
- Host: GitHub
- URL: https://github.com/arthyn/stitchwind
- Owner: arthyn
- License: mit
- Archived: true
- Created: 2020-09-18T17:13:18.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-22T00:22:42.000Z (about 4 years ago)
- Last Synced: 2024-04-23T21:07:18.461Z (7 months ago)
- Topics: css-in-js, design-system, design-tokens, stitches, tailwind, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 80.1 KB
- Stars: 33
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - stitchwind
README
# Stitchwind
This library helps bridge the gap between [Tailwind](https://tailwindcss.com/) and [Stitches](https://stitches.dev/). Considering Stitches was somewhat inspired by Tailwind, I thought we should be able to use the design tokens and utilities from Stitches' progenitor.
## Installation
```bash
npm install stitchwind
```## Usage
### Without Customization
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.
```js
import stitchwind from 'stitchwind'
import { createStyled } from '@stitches/react'export const { styled, css } = createStyled(stitchwind)
```### Changing Prefix
```js
import stitchwind, { usePrefix } from 'stitchwind'
import { createStyled } from '@stitches/react'const customPrefixedConfig = usePrefix('@', stitchwind);
export const { styled, css } = createStyled(customPrefixedConfig);
```## Current Support
Currently Stitchwind only supports tokens and breakpoints from Tailwind. Utilities to come soon.
## Available Breakpoints
Every breakpoint is loaded from Tailwind, `$sm` through `$xl`
## Available Tokens
### Colors
Every color and color scale is loaded ie. `$black` or `$indigo600` into Stitches' `colors` token.
### Spacing
Every spacing size is loaded ie. `$0` through `$64` and `$px`
### Sizes
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
Fonts from Tailwind are loaded as comma delimited strings and include `$sans`, `$serif`, and `$mono`
### Font Weights
Every font weight is loaded, `$hairline` through `$black`
### Font Sizes
Every font size is loaded, `$xs` through `$6xl`
### Line Heights
Every line height is loaded, `$3` through `$10` and `$none` through `$loose`
### Letter Spacings
Every letter spacing is loaded, `$tighter` through `$widest`
### Border Widths
Every border width is loaded, `$0` through `$8` including `$default` for `1px`
### Border Radius
Every border radii is loaded, `$none` through `$full`
### Box Shadow
Every box shadow is loaded, `$xs` through `$2xl`, `$inner`, `$outline`, and `$none`
### Z Index
Every z-index is loaded, `$0` through `$50` and `$auto`
## License
Licensed under the MIT License, Copyright © 2020-present Hunter Miller.
See LICENSE for more information.