483bd3ddda
* Find/replace * Update more URLs * More rename * Fix remaining examples * More updates * Update create-next-app * Update remaining text * Update Co-authored-by: Shu Uesugi <shu@chibicode.com>
67 lines
2.2 KiB
Markdown
67 lines
2.2 KiB
Markdown
# 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](https://vercel.com):
|
|
|
|
[](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss-emotion)
|
|
|
|
## How to use
|
|
|
|
### Using `create-next-app`
|
|
|
|
Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
# or
|
|
yarn
|
|
yarn dev
|
|
```
|
|
|
|
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
|
|
|
## Notes
|
|
|
|
This setup has inspiration from [examples/with-tailwindcss](https://github.com/zeit/next.js/blob/canary/examples/with-tailwindcss/README.md). This example will show you how to integrate [Emotion](https://emotion.sh/docs/introduction) with [tailwind](https://tailwindcss.com/).
|
|
|
|
`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:
|
|
|
|
```jsx
|
|
const Header = styled.div`
|
|
${tw`font-mono text-sm text-gray-800`}
|
|
`
|
|
```
|
|
|
|
Will be transformed into:
|
|
|
|
```css
|
|
.css-25og8s-Header {
|
|
font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
|
monospace;
|
|
font-size: 0.875rem;
|
|
color: #2d3748;
|
|
}
|
|
```
|