emotion-tailwind-preflight

emotion-tailwind-preflight

💎 Merge the shiny TailwindCSS base styles into your CSS-in-JS project!

You like the base styles from TailwindCSS library? But you also want to use the Emotion CSS-in-JS library? Then this library is for you.

The emotion-tailwind-preflight library contains the latest base styles from TailwindCSS, which they call Preflight.

The Preflight CSS is pulled from TailwindCSS library and parsed into emotion ready format.

Usage

npm install --save emotion-tailwind-preflight

JavaScript

import { Global, css } from "@emotion/react";
import emotionTailwindPreflight from "emotion-tailwind-preflight";

// ...

<Global
  styles={css`
    ${emotionTailwindPreflight}
    html,
    body {
      padding: 0;
      margin: 0;
      background: white;
      min-height: 100%;
      font-family: Helvetica, Arial, sans-serif;
    }
  `}
/>

What do the base styles do

The TailwindCSS base styles are an opinionated set of CSS styles to smooth over cross-browser inconsistencies. They for example remove all default margins. Check out the TailwindCSS documentation to see all detailed configurations.

Development

Gitpod

This repository supports the online IDE Gitpod.

Migrate to the latest Tailwind CSS base styles

Running npm run update will update to the latest Tailwind CSS version and copy the base styles to the ./src/index.js file.

After that, a new build can be created using npm run build and released.

License

The MIT License

Credits

The emotion-tailwind-preflight library is maintained and sponsored by the Swiss web and mobile app development company Florian Gyger Software.

Special thanks to Infinum, the original creator of the quite similar library emotion-normalize on which this library is based on.

If this library saved you some time and money please consider sponsoring me, so I can build more libraries for free and actively maintain them for you. Thank you 🙏

Changelog

v2.0.1

• fix: migrated types dependency from emotion core to utils 14ed51e
• chore: use @emotion/react instead of @emotion/core in example 53f1601