History

Henrik Wenz 92aafcbcf1 [Docs] Add config types to all examples (#40083 ) <!-- Thanks for opening a PR! Your contribution is much appreciated. In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> ## Summary - Added jsdoc typing for all examples using `next.config.js` - Added jsdoc typing for all examples using `tailwind.config.js` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)		2022-08-31 16:41:22 -05:00
..
components	[Examples] update with-tailwindcss-emotion to tailwind 2.0 (#19476 )	2020-11-25 18:17:12 +00:00
pages	refactor(with-tailwindcss-emotion): example remove styles directory (#21368 )	2021-01-22 12:16:57 +01:00
.babelrc	[Examples] update with-tailwindcss-emotion to tailwind 2.0 (#19476 )	2020-11-25 18:17:12 +00:00
.gitignore	Update default gitignore templates (#39051 )	2022-07-26 20:08:40 -05:00
package.json	fix(with-tailwindcss-emotion): 'theme' of undefined (#35588 )	2022-05-22 04:42:51 +00:00
postcss.config.js	Enable JIT for Tailwind + Emotion CSS example (#23912 )	2021-04-19 21:57:15 -05:00
README.md	docs(examples): improve DX while copying command to create new project (#38410 )	2022-07-26 21:57:48 -05:00
tailwind.config.js	[Docs] Add config types to all examples (#40083 )	2022-08-31 16:41:22 -05:00

README.md

Tailwind CSS with Emotion.js example

This is an example of how you can add tailwind CSS with Emotion.js in your web app. It takes inspiration from examples/with-tailwindcss.

xwind 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.

Deploy your own

Deploy the example using Vercel:

How to use

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

npx create-next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

yarn create next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

pnpm create next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

Deploy it to the cloud with Vercel (Documentation).

Notes

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(xw`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;
}

Tailwind CSS config

Use the following command when you add a tailwind plugin that adds to tailwind's base css:

npm run build:base-css
# or
yarn run build:base-css