Stitches Core
Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience.
Get started
npm install @stitches/core
import createCss from '@stitches/core'
const sheet = createCss({
theme: {
colors: {
black: '#2f2f2f',
white: '#f3f3f3',
},
},
})
const button = sheet.css({
all: 'unset',
boxShadow: '0 0 0 1px $black',
backgroundColor: '$black',
color: '$white',
padding: '.5em 1em',
})
const alertButton = sheet.css(button, {
boxShadow: '0 0 0 1px red',
})
console.log(`<button class="${button}">`)
console.log(`<style>${sheet}</style>`)
Configure an instance
import createCss from '@stitches/core'
export const { css } = createCss({
prefix: 'my-lib',
theme: {
colors: {
red: 'tomato',
},
space: {
0: '1rem',
},
},
media: {
tablet: '(min-width: 700px)',
},
utils: {
mX: (value) => ({
marginLeft: value,
marginRight: value,
}),
mY: (value) => ({
marginTop: value,
marginBottom: value,
}),
},
})
const colorful = css({
color: '$red',
marginX: 0,
'@tablet': {
color: 'blue',
},
})
document.querySelectorAll('section').forEach((el) => el.classList.add(colorful))
Themes
Create themes to override defaults:
import createCss from '@stitches/core'
export const { theme } = createCss({
theme: {
colors: {
primary: 'tomato',
},
},
})
export const curiousTheme = theme({
colors: {
primary: 'pink',
},
})
document.querySelectorAll('.curious').forEach((el) => el.classList.add(curiousTheme))