stitches-normalize-css

!GitHub release !issues

Normalize CSS for stitches.

Demo on CodeSandbox.

---

Installation:

yarn add stitches-normalize-css

or

npm install stitches-normalize-css

Usage:

#### Adding normalize or opinionated to globalCss

Normalize CSS rules here

Opinionated CSS rules here

``jsx
import * as React from 'react'
import { normalize } from 'stitches-normalize-css'
// if you want to use the opinionated one, import opinionated instead of normalize
// import { opinionated } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

// path-to/stitches.config.js - Sample stitches config
/*
export const {
styled,
css,
globalCss,
keyframes,
getCssText,
theme,
createTheme,
config,
} = createStitches({
theme: {
colors: {
gray400: 'gainsboro',
gray500: 'lightgray',
},
},
media: {
bp1: '(min-width: 480px)',
},
})
*/

const globalStyles = globalCss(...normalize)

const App: React.FC = () => {
globalStyles()
return


}
`

#### Adding custom global styles on top of normalize

`jsx
import * as React from 'react'
import type * as Stitches from '@stitches/react';
import { normalize } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

const customGlobalStyles: Record = {
".App": {
backgroundColor: "papayawhip"
},
body: {
border: "2px solid red",
minHeight: "100vh"
}
};

const globalStyles = globalCss(...normalize, customGlobalStyles);

const App: React.FC = () => {
globalStyles()
return


}
``

Credits

All credit goes to CSS Tools for Normalize CSS.