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: 23 days 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 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T00:47:55.000Z (almost 2 years ago)
• Last Synced: 2024-11-29T13:53:30.797Z (25 days ago)
• Topics: css, normalize, preflight, react, styled, styled-components
• Language: JavaScript
• Homepage:
• Size: 405 KB
• Stars: 4
• Watchers: 0
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![](/docs/banner.png)

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