rsnext/examples/with-tailwindcss-emotion

Tailwind CSS with Emotion.js example

This is an example of how you can add the tailwind CSS with Emotion.js in your web app.

Deploy your own

Deploy the example using Vercel:

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npm init next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app
# or
yarn create next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-tailwindcss-emotion
cd with-tailwindcss-emotion

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).

Notes

This setup has inspiration from examples/with-tailwindcss. This example will show you how to integrate Emotion with tailwind.

tailwindcss.macros is used to add tailwind classes inside Emotion by injecting the tailwind CSS into the styled component. No need to use CSS files, autoprefix, minifier, etc. You will get the full benefits of Emotion.

The CSS classes generated by Emotion will include the tailwind styles but not the name of the classes. For example the following component:

const Header = styled.div`
  ${tw`font-mono text-sm text-gray-800`}
`

Will be transformed into:

.css-25og8s-Header {
  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 0.875rem;
  color: #2d3748;
}