rsnext/packages/create-next-app
Balázs Orbán 8c98a207f2
feat(cli): introduce --tailwind flag (#46927)
### What?

This PR introduces a new `--tailwind` flag to the `create-next-app` CLI,
to make it easier to bootstrap a Next.js app with Tailwind CSS
pre-configured. This is going to be the **default**. To opt-out of
Tailwind CSS, you can use the `--no-tailwind` flag.

### Why?

Tailwind CSS is one of the most popular styling solutions right now, and
we would like to make it easier to get started.

Currently, the closest you can come to this is by running `pnpm create
next-app -e with-tailwindcss` which will clone the
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
example. But that example is not configured for the App Router. This PR
will let you add Tailwind CSS to both `app/`, `pages/`, and start out
with TypeScript or JavaScript via the CLI prompts.

(Some community feedback
https://twitter.com/dev_jonaskaas/status/1632367991827443713,
https://twitter.com/samselikoff/status/1634662473331617794)

### How?

We are adding 4 new templates to the CLI bundle.

> Note: The styling is not pixel-perfect compared to the current
templates (using CSS modules) to require fewer overrides, but I tried to
match it as close as possible. Here are a few screenshots:

<details>
<summary><b>Current, light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/>
</details>

<details>
<summary><b>Tailwind (new), light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/>
</details>

<details>
<summary><b>Current, dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/>
</details>

<details>
<summary><b>Tailwind (new), dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/>
</details>

#### For reviewers

This introduces 4 new templates, with a very similar code base to the
original ones. To keep the PR focused, I decided to copy over duplicate
code, but we could potentially create a shared folder for files that are
the same across templates to somewhat reduce the CLI size. Not sure if
it's worth it, let me know. Probably fine for now, but something to
consider if we are adding more permutations in the future.

---

~Work remaining:~

- [x] app+ts
	- [x] layout
	- [x] dark mode
	- [x] media queries
	- [x] animations
- [x] app+js
- [x] pages+ts
- [x] pages+js
- [x] prompt/config
- [x] deprecate Tailwind CSS example in favor of CLI
- [x] update docs
- [x] add test
- [x] add [Prettier
plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
 
Closes NEXT-772
Related #45814, #44286
2023-03-16 16:06:27 +01:00
..
helpers Fix nested example setup with create-next-app (#45390) 2023-01-29 11:54:28 -08:00
templates feat(cli): introduce --tailwind flag (#46927) 2023-03-16 16:06:27 +01:00
create-app.ts feat(cli): introduce --tailwind flag (#46927) 2023-03-16 16:06:27 +01:00
index.ts feat(cli): introduce --tailwind flag (#46927) 2023-03-16 16:06:27 +01:00
package.json feat(cli): introduce --tailwind flag (#46927) 2023-03-16 16:06:27 +01:00
README.md docs(create-next-app): copy changes from #42012 to package-level README (#42217) 2022-10-31 00:02:02 -07:00
tsconfig.json Update CNA build target in tsconfig (#25780) 2021-06-08 09:32:29 +02:00

Create Next App

The easiest way to get started with Next.js is by using create-next-app. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the official Next.js examples. To get started, use the following command:

Interactive

You can create a new project interactively by running:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

You will be asked for the name of your project, and then whether you want to create a TypeScript project:

✔ Would you like to use TypeScript with this project? … No / Yes

Select Yes to install the necessary types/dependencies and create a new TS project.

Non-interactive

You can also pass command line arguments to set up a new project non-interactively. See create-next-app --help:

create-next-app <project-directory> [options]

Options:
  -V, --version                      output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --js, --javascript

    Initialize as a JavaScript project.

  --use-npm

    Explicitly tell the CLI to bootstrap the app using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the app using pnpm

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a GitHub URL. The URL can use
    any branch and/or subdirectory

  --example-path <path-to-example>

    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar

Why use Create Next App?

create-next-app allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:

  • Interactive Experience: Running npx create-next-app@latest (with no arguments) launches an interactive experience that guides you through setting up a project.
  • Zero Dependencies: Initializing a project is as quick as one second. Create Next App has zero dependencies.
  • Offline Support: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
  • Support for Examples: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. npx create-next-app --example api-routes).
  • Tested: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.