Fix deploy buttons URLs (#20834 )

Fix all deploy button URLs in the Next.js repo to follow the following format:
```
https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME>
```

The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button.

Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs.

---

For example, for the `hello-world` example:

The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world

And the deploy button looks like this:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world)

---

For reference, I used the following regexes to search for the incorrect URLs

```
\(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\)
\(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\)
\(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\)
https://vercel.com/import/git
https://vercel.com/import/select-scope
https://vercel.com/import
https://vercel.com/new/project
```

2021-01-07 01:40:29 +00:00

2 KiB

Raw Blame History

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 or Yarn 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

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

2 KiB Raw Blame History