First Kanisorn Sutham ff5dcacc2e Add the example of Tailwind CSS with emotion (#8931 )

* Add the example of tailwindcss with emotion

* Add README.md

* Fix Unexpected trailing comma.

* Update the readme, and use latest Next.js version

2019-10-16 22:51:53 -05:00

1.9 KiB

Raw Blame History

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.

How to use

Using `create-next-app`

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

npx create-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 now (download):

now

The idea behind the example

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;
}

1.9 KiB Raw Blame History