This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either.
Here's an example:
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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
- [x] Examples updated
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
This Pull Request makes [`@tailwindcss/jit`](https://github.com/tailwindlabs/tailwindcss-jit) the default engine for Tailwind CSS.
It has the following advantages:
- Lightning-fast build times because the CSS is generated on demand.
- Every variant is enabled out of the box.
- Generate arbitrary styles without writing custom CSS.
- Better performance in browser dev-tools.
## Change
To opt-in to using the new layers mode by default.
## Motivation
- Reduces CSS filesize
- Prevents users from using the already deprecated old layers mode
- Removes the following console warnings:
```log
risk - There are upcoming breaking changes: purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
```
[more info](https://tailwindcss.com/docs/upcoming-changes)
Updated `examples/with-tailwindcss` to the newest TailwindCSS, and opted in to future-facing breaking changes.
Also created a jsconfig.json so that files can be imported without traversing up relative paths.
Fixes https://github.com/vercel/next.js/issues/15595
- Updated the tailwindcss and tailwindcss-emotion examples to the latest version of tailwindcss
- Added a new `with-styled-jsx` example
- Updated the `basic-css` example to use CSS Modules instead of styled-jsx
- Added the examples to the documentation page for built-in css support
* Update postcss.config.js
Return empty array if the condition is not met to avoid a null/undefined PostCSS plugin.
* Update postcss.config.js
Fix array spread
* Update postcss.config.js
remove extra operator
* Fix linting
Co-authored-by: Tim Neutkens <timneutkens@me.com>
* Find/Replace "Deploy it to the cloud..."
* Find/Replace "Deploy it to the cloud..." (no colon)
* Find/Replace "Deploy it to the cloud..." for firebase
* Convert remaining ones
* Storybook deployment
* Update with-stripe-typescript
* Update contributing.md
* Remove `now`
* Update examples/with-stripe-typescript/README.md
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
* Remove prefetch from with-apollo-and-redux-saga example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
* Remove prefetch from using-inferno example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
* Remove prefetch from with-apollo-and-redux example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
* Remove prefetch from with-apollo-auth example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
* Remove prefetch from with-tailwindcss example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
* Remove prefetch from with-graphql-hooks example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
* Remove prefetch from data-fetch example
Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
