|
1 | | -# Next.js + Tailwind CSS Example |
| 1 | +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). |
2 | 2 |
|
3 | | -This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). |
| 3 | +## Getting Started |
4 | 4 |
|
5 | | -## Preview |
| 5 | +First, run the development server: |
6 | 6 |
|
7 | | -Preview the example live on [StackBlitz](http://stackblitz.com/): |
| 7 | +```bash |
| 8 | +npm run dev |
| 9 | +# or |
| 10 | +yarn dev |
| 11 | +``` |
8 | 12 |
|
9 | | -[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) |
| 13 | +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
| 14 | + |
| 15 | +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. |
| 16 | + |
| 17 | +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. |
| 18 | + |
| 19 | +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. |
| 20 | + |
| 21 | +## Learn More |
| 22 | + |
| 23 | +To learn more about Next.js, take a look at the following resources: |
| 24 | + |
| 25 | +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
| 26 | +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
| 27 | + |
| 28 | +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! |
10 | 29 |
|
11 | | -## Deploy your own |
| 30 | +## Deploy on Vercel |
| 31 | + |
| 32 | +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
| 33 | + |
| 34 | +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
12 | 35 |
|
13 | 36 | Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): |
14 | 37 |
|
15 | 38 | [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) |
16 | 39 |
|
17 | | -## How to use |
| 40 | +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
18 | 41 |
|
19 | | -Execute [`create-next-app`](https://github.com/vercel/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: |
| 42 | +## Preview |
| 43 | + |
| 44 | +Preview the example live on [StackBlitz](http://stackblitz.com/): |
| 45 | + |
| 46 | +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) |
20 | 47 |
|
21 | | -```bash |
22 | | -npx create-next-app --example with-tailwindcss with-tailwindcss-app |
23 | | -# or |
24 | | -yarn create next-app --example with-tailwindcss with-tailwindcss-app |
25 | | -``` |
26 | 48 |
|
27 | | -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
|
0 commit comments