https://github.com/merelinguist/styled-preflight
Normalize.css with a kick for styled-components CSS-in-JS library
https://github.com/merelinguist/styled-preflight
css normalize preflight react styled styled-components
Last synced: 4 months ago
JSON representation
Normalize.css with a kick for styled-components CSS-in-JS library
- Host: GitHub
- URL: https://github.com/merelinguist/styled-preflight
- Owner: merelinguist
- Created: 2019-06-19T09:30:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:47:55.000Z (about 3 years ago)
- Last Synced: 2025-07-20T03:40:39.605Z (7 months ago)
- Topics: css, normalize, preflight, react, styled, styled-components
- Language: JavaScript
- Homepage:
- Size: 405 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A CSS-normalizing library for styled-components, with a kick.
The original `normalize.css` is pulled from necolas/normalize.css, and parsed into a styled ready format. Some small additions are added, based on Tailwind’s preflight, to make the normalizing more useful for building apps.
## Usage
```sh
npm i styled-preflight
```
```sh
yarn add styled-preflight
```
### styled-components v4 / v5
Use as component:
```jsx
// index.js
import React from 'react'
import { Preflight } from 'styled-preflight'
import { App } from './app'
const Root = () => (
)
```
Alternatively, you can use the [`createGlobalStyle`](https://styled-components.com/docs/api#createglobalstyle) API:
```jsx
// styles/index.js
import { createGlobalStyle } from 'styled-components'
import { preflight } from 'styled-preflight'
export const GlobalStyle = createGlobalStyle`
${preflight}
// You can continue writing global styles here
body {
background-color: black;
}
`
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { GlobalStyle } from './styles'
import { App } from './app'
const Root = () => (
)
ReactDOM.render(, document.querySelector('#root'))
```
You can also use named imports:
```jsx
// ES Modules
import { preflight, Preflight } from 'styled-preflight'
// CommonJS
const { preflight, Preflight } = require('styled-preflight')
````
## Prior art
- https://github.com/sergeysova/styled-normalize
- https://github.com/tailwindcss/tailwindcss