57426a2849
This PR updates the minimum version of React used by examples from 17.0.2 to 18.2.0. Fixes #41975 ## Bug - [x] Related issues linked using `fixes #41975` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) |
||
---|---|---|
.. | ||
components | ||
pages | ||
.babelrc | ||
.gitignore | ||
package.json | ||
postcss.config.js | ||
README.md | ||
tailwind.config.js |
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