feat(cli): introduce --tailwind flag

docs/api-reference/create-next-app.md

@@ -45,9 +45,17 @@ Options:
 
     Initialize as a JavaScript project.
 
+  --tailwind
+
+    Initialize with Tailwind CSS config. (default)
+
+  --no-tailwind
+
+    Initialize without Tailwind CSS config.
+
   --eslint
 
-    Initialize with eslint config.
+    Initialize with ESLint config.
 
   --experimental-app
 

examples/with-tailwindcss/README.md

@@ -1,27 +1,19 @@
 # Next.js + Tailwind CSS Example
 
-This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.2)](https://tailwindcss.com/blog/tailwindcss-v3-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
-
-[![Deploy with Vercel](https://vercel.com/button)](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)
+Tailwind CSS is integrated into the `create-next-app` CLI, which supports TypeScript and JavaScript, as well as the App Router (`app/`) and the pages directory `pages/`.
 
 ## How to use
 
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap a project preconfigured with Tailwind CSS:
 
 ```bash
-npx create-next-app --example with-tailwindcss with-tailwindcss-app
+npx create-next-app --tailwind with-tailwindcss-app
 ```
 
 ```bash
-yarn create next-app --example with-tailwindcss with-tailwindcss-app
+yarn create next-app --tailwind with-tailwindcss-app
 ```
 
 ```bash
-pnpm create next-app --example with-tailwindcss with-tailwindcss-app
+pnpm create next-app --tailwind with-tailwindcss-app
 ```
-
-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)).

package.json

@@ -214,7 +214,7 @@
     "styled-jsx": "5.1.1",
     "styled-jsx-plugin-postcss": "3.0.2",
     "swr": "^2.0.0",
-    "tailwindcss": "1.1.3",
+    "tailwindcss": "3.2.7",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",
     "ts-node": "10.9.1",

packages/create-next-app/create-app.ts

@@ -34,6 +34,7 @@ export async function createApp({
   example,
   examplePath,
   typescript,
+  tailwind,
   eslint,
   experimentalApp,
   srcDir,
@@ -44,14 +45,21 @@ export async function createApp({
   example?: string
   examplePath?: string
   typescript: boolean
+  tailwind: boolean
   eslint: boolean
   experimentalApp: boolean
   srcDir: boolean
   importAlias: string
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
-  const template: TemplateType = experimentalApp ? 'app' : 'default'
+  const template: TemplateType = experimentalApp
+    ? tailwind
+      ? 'app-tw'
+      : 'app'
+    : tailwind
+    ? 'default-tw'
+    : 'default'
 
   if (example) {
     let repoUrl: URL | undefined
@@ -222,6 +230,7 @@ export async function createApp({
       mode,
       packageManager,
       isOnline,
+      tailwind,
       eslint,
       srcDir,
       importAlias,

packages/create-next-app/index.ts

@@ -50,6 +50,13 @@ const program = new Commander.Command(packageJson.name)
     `
 
   Initialize as a JavaScript project.
+`
+  )
+  .option(
+    '--tailwind',
+    `
+
+  Initialize with Tailwind CSS config. (default)
 `
   )
   .option(
@@ -222,14 +229,12 @@ async function run(): Promise<void> {
     const defaults: typeof preferences = {
       typescript: true,
       eslint: true,
+      tailwind: true,
       srcDir: false,
       importAlias: '@/*',
     }
-    const getPrefOrDefault = (field: string) => {
-      return typeof preferences[field] === 'undefined'
-        ? defaults[field]
-        : preferences[field]
-    }
+    const getPrefOrDefault = (field: string) =>
+      preferences[field] ?? defaults[field]
 
     if (!program.typescript && !program.javascript) {
       if (ciInfo.isCI) {
@@ -238,7 +243,7 @@ async function run(): Promise<void> {
         program.typescript = false
         program.javascript = true
       } else {
-        const styledTypeScript = chalk.hex('#007acc')('TypeScript')
+        const styledTypeScript = chalk.hex('#0645ad')('TypeScript')
         const { typescript } = await prompts(
           {
             type: 'toggle',
@@ -275,7 +280,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.eslint = true
       } else {
-        const styledEslint = chalk.hex('#007acc')('ESLint')
+        const styledEslint = chalk.hex('#4b32c3')('ESLint')
         const { eslint } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -290,6 +295,28 @@ async function run(): Promise<void> {
       }
     }
 
+    if (
+      !process.argv.includes('--tailwind') &&
+      !process.argv.includes('--no-tailwind')
+    ) {
+      if (ciInfo.isCI) {
+        program.tailwind = false
+      } else {
+        const tw = chalk.hex('#38BDF8')('Tailwind CSS')
+        const { tailwind } = await prompts({
+          onState: onPromptState,
+          type: 'toggle',
+          name: 'tailwind',
+          message: `Would you like to use ${tw} with this project?`,
+          initial: getPrefOrDefault('tailwind'),
+          active: 'Yes',
+          inactive: 'No',
+        })
+        program.tailwind = Boolean(tailwind)
+        preferences.tailwind = Boolean(tailwind)
+      }
+    }
+
     if (
       !process.argv.includes('--src-dir') &&
       !process.argv.includes('--no-src-dir')
@@ -367,6 +394,7 @@ async function run(): Promise<void> {
       example: example && example !== 'default' ? example : undefined,
       examplePath: program.examplePath,
       typescript: program.typescript,
+      tailwind: program.tailwind,
       eslint: program.eslint,
       experimentalApp: program.experimentalApp,
       srcDir: program.srcDir,
@@ -395,6 +423,7 @@ async function run(): Promise<void> {
       packageManager,
       typescript: program.typescript,
       eslint: program.eslint,
+      tailwind: program.tailwind,
       experimentalApp: program.experimentalApp,
       srcDir: program.srcDir,
       importAlias: program.importAlias,

packages/create-next-app/package.json

@@ -26,7 +26,8 @@
     "release": "ncc build ./index.ts -o ./dist/ --minify --no-cache --no-source-map-register",
     "prepublishOnly": "cd ../../ && turbo run build",
     "build": "pnpm release",
-    "test-pack": "cd ../../ && pnpm test-pack create-next-app"
+    "test-pack": "cd ../../ && pnpm test-pack create-next-app",
+    "lint-fix": "pnpm prettier -w --plugin prettier-plugin-tailwindcss 'templates/*-tw/{ts,js}/{app,pages}/**/*.{js,ts,tsx}'"
   },
   "devDependencies": {
     "@types/async-retry": "1.4.2",
@@ -48,6 +49,7 @@
     "cross-spawn": "6.0.5",
     "glob": "8.0.3",
     "got": "10.7.0",
+    "prettier-plugin-tailwindcss": "0.2.4",
     "prompts": "2.1.0",
     "tar": "4.4.10",
     "update-check": "1.5.4",

packages/create-next-app/templates/app-tw/js/README-template.md

@@ -0,0 +1,36 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+[http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.js`.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/create-next-app/templates/app-tw/js/app/api/hello/route.ts

@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response('Hello, Next.js!')
+}