8c98a207f2
### 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
243 lines
8.9 KiB
JSON
243 lines
8.9 KiB
JSON
{
|
|
"name": "nextjs-project",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"workspaces": [
|
|
"packages/*"
|
|
],
|
|
"scripts": {
|
|
"new-error": "plop error",
|
|
"new-test": "plop test",
|
|
"clean": "lerna clean -y && lerna bootstrap && lerna run clean && lerna exec 'rm -rf ./dist'",
|
|
"build": "turbo run build",
|
|
"lerna": "lerna",
|
|
"dev": "turbo run dev --parallel",
|
|
"test-types": "tsc",
|
|
"test-unit": "jest test/unit/ packages/next/ packages/font",
|
|
"test-dev": "cross-env NEXT_TEST_MODE=dev pnpm testheadless",
|
|
"test-start": "cross-env NEXT_TEST_MODE=start pnpm testheadless",
|
|
"test-deploy": "cross-env NEXT_TEST_MODE=deploy pnpm testheadless",
|
|
"testonly-dev": "cross-env NEXT_TEST_MODE=dev pnpm testonly",
|
|
"testonly-start": "cross-env NEXT_TEST_MODE=start pnpm testonly",
|
|
"testonly-deploy": "cross-env NEXT_TEST_MODE=deploy pnpm testonly",
|
|
"test": "pnpm testheadless",
|
|
"testonly": "jest --runInBand",
|
|
"testheadless": "cross-env HEADLESS=true pnpm testonly",
|
|
"test-pack": "cross-env TS_NODE_TRANSPILE_ONLY=1 node --loader ts-node/esm scripts/test-pack-package.mts",
|
|
"genstats": "cross-env LOCAL_STATS=true node .github/actions/next-stats-action/src/index.js",
|
|
"git-reset": "git reset --hard HEAD",
|
|
"git-clean": "git clean -d -x -e node_modules -e packages -f",
|
|
"lint-typescript": "turbo run typescript",
|
|
"lint-eslint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0 --config .eslintrc.json --no-eslintrc",
|
|
"lint-no-typescript": "run-p prettier-check lint-eslint",
|
|
"lint": "run-p test-types lint-typescript prettier-check lint-eslint lint-language",
|
|
"lint-fix": "pnpm prettier-fix && eslint . --ext js,jsx,ts,tsx --fix --max-warnings=0 --config .eslintrc.json --no-eslintrc",
|
|
"lint-language": "alex .",
|
|
"prettier-check": "prettier --check .",
|
|
"prettier-fix": "prettier --write .",
|
|
"types": "lerna run types --stream",
|
|
"typescript": "turbo run typescript",
|
|
"prepublishOnly": "turbo run build",
|
|
"publish-canary": "git checkout canary && git pull && lerna version prerelease --preid canary --force-publish && release --pre --skip-questions",
|
|
"publish-stable": "lerna version --force-publish",
|
|
"lint-staged": "lint-staged",
|
|
"next-with-deps": "./scripts/next-with-deps.sh",
|
|
"next": "cross-env NEXT_TELEMETRY_DISABLED=1 node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
|
|
"next-no-sourcemaps": "cross-env NEXT_TELEMETRY_DISABLED=1 node --trace-deprecation packages/next/dist/bin/next",
|
|
"clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER pnpm next build test/integration/basic",
|
|
"debug": "cross-env NEXT_TELEMETRY_DISABLED=1 node --inspect packages/next/dist/bin/next",
|
|
"postinstall": "git config feature.manyFiles true && node scripts/install-native.mjs",
|
|
"version": "npx pnpm@7.24.3 install && IS_PUBLISH=yes ./scripts/check-pre-compiled.sh && git add .",
|
|
"prepare": "husky install",
|
|
"sync-react": "node ./scripts/sync-react.js"
|
|
},
|
|
"devDependencies": {
|
|
"@babel/core": "7.18.0",
|
|
"@babel/eslint-parser": "7.18.2",
|
|
"@babel/generator": "7.18.0",
|
|
"@babel/parser": "7.12.11",
|
|
"@babel/plugin-proposal-object-rest-spread": "7.14.7",
|
|
"@babel/preset-flow": "7.14.5",
|
|
"@babel/preset-react": "7.14.5",
|
|
"@edge-runtime/jest-environment": "2.0.5",
|
|
"@fullhuman/postcss-purgecss": "1.3.0",
|
|
"@mdx-js/loader": "2.2.1",
|
|
"@mdx-js/react": "2.2.1",
|
|
"@next/bundle-analyzer": "workspace:*",
|
|
"@next/env": "workspace:*",
|
|
"@next/eslint-plugin-next": "workspace:*",
|
|
"@next/font": "workspace:*",
|
|
"@next/mdx": "workspace:*",
|
|
"@next/plugin-storybook": "workspace:*",
|
|
"@next/polyfill-module": "workspace:*",
|
|
"@next/polyfill-nomodule": "workspace:*",
|
|
"@next/swc": "workspace:*",
|
|
"@svgr/webpack": "5.5.0",
|
|
"@swc/cli": "0.1.55",
|
|
"@swc/core": "1.2.203",
|
|
"@swc/helpers": "0.4.14",
|
|
"@testing-library/react": "13.0.0",
|
|
"@types/cheerio": "0.22.16",
|
|
"@types/fs-extra": "8.1.0",
|
|
"@types/html-validator": "5.0.3",
|
|
"@types/http-proxy": "1.17.3",
|
|
"@types/jest": "24.0.13",
|
|
"@types/node": "14.14.31",
|
|
"@types/node-fetch": "2.6.1",
|
|
"@types/react": "16.9.17",
|
|
"@types/react-dom": "16.9.4",
|
|
"@types/relay-runtime": "13.0.0",
|
|
"@types/selenium-webdriver": "4.0.15",
|
|
"@types/sharp": "0.29.3",
|
|
"@types/string-hash": "1.1.1",
|
|
"@types/trusted-types": "2.0.2",
|
|
"@typescript-eslint/eslint-plugin": "4.29.1",
|
|
"@typescript-eslint/parser": "4.29.1",
|
|
"@vercel/fetch": "6.1.1",
|
|
"@vercel/og": "0.0.20",
|
|
"@webassemblyjs/ast": "1.11.1",
|
|
"@webassemblyjs/floating-point-hex-parser": "1.11.1",
|
|
"@webassemblyjs/helper-api-error": "1.11.1",
|
|
"@webassemblyjs/helper-buffer": "1.11.1",
|
|
"@webassemblyjs/helper-code-frame": "npm:empty-npm-package@1.0.0",
|
|
"@webassemblyjs/helper-module-context": "npm:empty-npm-package@1.0.0",
|
|
"@webassemblyjs/helper-numbers": "1.11.1",
|
|
"@webassemblyjs/helper-wasm-bytecode": "1.11.1",
|
|
"@webassemblyjs/helper-wasm-section": "1.11.1",
|
|
"@webassemblyjs/ieee754": "1.11.1",
|
|
"@webassemblyjs/leb128": "1.11.1",
|
|
"@webassemblyjs/utf8": "1.11.1",
|
|
"@webassemblyjs/wasm-edit": "1.11.1",
|
|
"@webassemblyjs/wasm-gen": "1.11.1",
|
|
"@webassemblyjs/wasm-opt": "1.11.1",
|
|
"@webassemblyjs/wasm-parser": "1.11.1",
|
|
"@webassemblyjs/wast-parser": "npm:empty-npm-package@1.0.0",
|
|
"@webassemblyjs/wast-printer": "1.11.1",
|
|
"@zeit/next-typescript": "1.1.2-canary.0",
|
|
"abort-controller": "3.0.0",
|
|
"alex": "9.1.0",
|
|
"amphtml-validator": "1.0.35",
|
|
"async-sema": "3.0.1",
|
|
"body-parser": "1.20.1",
|
|
"browserslist": "4.20.2",
|
|
"buffer": "5.6.0",
|
|
"chalk": "5.0.1",
|
|
"cheerio": "0.22.0",
|
|
"cookie": "0.4.1",
|
|
"cors": "2.8.5",
|
|
"coveralls": "3.0.3",
|
|
"create-next-app": "workspace:*",
|
|
"critters": "0.0.6",
|
|
"cross-env": "6.0.3",
|
|
"cross-spawn": "6.0.5",
|
|
"dd-trace": "2.3.0",
|
|
"es5-ext": "0.10.53",
|
|
"escape-string-regexp": "2.0.0",
|
|
"eslint": "7.24.0",
|
|
"eslint-config-next": "workspace:*",
|
|
"eslint-plugin-eslint-plugin": "4.3.0",
|
|
"eslint-plugin-import": "2.22.1",
|
|
"eslint-plugin-jest": "24.3.5",
|
|
"eslint-plugin-jsdoc": "39.6.4",
|
|
"eslint-plugin-react": "7.23.2",
|
|
"eslint-plugin-react-hooks": "4.5.0",
|
|
"event-stream": "4.0.1",
|
|
"execa": "2.0.3",
|
|
"expect-type": "0.14.2",
|
|
"express": "4.17.0",
|
|
"faker": "5.5.3",
|
|
"faunadb": "2.6.1",
|
|
"find-up": "4.1.0",
|
|
"firebase": "7.14.5",
|
|
"flat": "5.0.2",
|
|
"form-data": "4.0.0",
|
|
"fs-extra": "9.0.0",
|
|
"get-port": "5.1.1",
|
|
"glob": "7.1.6",
|
|
"gzip-size": "5.1.1",
|
|
"html-validator": "5.1.18",
|
|
"http-proxy": "1.18.1",
|
|
"husky": "8.0.0",
|
|
"image-size": "0.9.3",
|
|
"is-animated": "2.0.2",
|
|
"isomorphic-unfetch": "3.0.0",
|
|
"jest": "27.0.6",
|
|
"jest-extended": "1.2.1",
|
|
"json5": "2.2.3",
|
|
"ky": "0.19.1",
|
|
"ky-universal": "0.6.0",
|
|
"lerna": "4.0.0",
|
|
"lint-staged": "10.1.7",
|
|
"lodash": "4.17.20",
|
|
"lost": "8.3.1",
|
|
"minimatch": "3.0.4",
|
|
"moment": "^2.24.0",
|
|
"nanoid": "3.1.30",
|
|
"next": "workspace:*",
|
|
"node-fetch": "2.6.7",
|
|
"npm-run-all": "4.1.5",
|
|
"nprogress": "0.2.0",
|
|
"pixrem": "5.0.0",
|
|
"playwright-chromium": "1.28.1",
|
|
"plop": "3.0.5",
|
|
"postcss": "8.4.14",
|
|
"postcss-nested": "4.2.1",
|
|
"postcss-pseudoelements": "5.0.0",
|
|
"postcss-short-size": "4.0.0",
|
|
"postcss-trolling": "0.1.7",
|
|
"prettier": "2.5.1",
|
|
"pretty-bytes": "5.3.0",
|
|
"pretty-ms": "7.0.0",
|
|
"random-seed": "0.3.0",
|
|
"react": "18.2.0",
|
|
"react-17": "npm:react@17.0.2",
|
|
"react-builtin": "npm:react@18.3.0-next-3706edb81-20230308",
|
|
"react-dom": "18.2.0",
|
|
"react-dom-17": "npm:react-dom@17.0.2",
|
|
"react-dom-builtin": "npm:react-dom@18.3.0-next-3706edb81-20230308",
|
|
"react-server-dom-webpack": "18.3.0-next-3706edb81-20230308",
|
|
"react-ssr-prepass": "1.0.8",
|
|
"react-virtualized": "9.22.3",
|
|
"relay-compiler": "13.0.2",
|
|
"relay-runtime": "13.0.2",
|
|
"release": "6.3.1",
|
|
"request-promise-core": "1.1.2",
|
|
"resolve-from": "5.0.0",
|
|
"rimraf": "3.0.2",
|
|
"sass": "1.54.0",
|
|
"seedrandom": "3.0.5",
|
|
"selenium-webdriver": "4.0.0-beta.4",
|
|
"semver": "7.3.7",
|
|
"shell-quote": "1.7.3",
|
|
"strip-ansi": "6.0.0",
|
|
"styled-components": "6.0.0-beta.5",
|
|
"styled-jsx": "5.1.1",
|
|
"styled-jsx-plugin-postcss": "3.0.2",
|
|
"swr": "^2.0.0",
|
|
"tailwindcss": "3.2.7",
|
|
"taskr": "1.1.0",
|
|
"tree-kill": "1.2.2",
|
|
"ts-node": "10.9.1",
|
|
"tsec": "0.2.1",
|
|
"turbo": "1.6.3",
|
|
"typescript": "4.8.2",
|
|
"unfetch": "4.2.0",
|
|
"wait-port": "0.2.2",
|
|
"webpack": "5.74.0",
|
|
"webpack-bundle-analyzer": "4.7.0",
|
|
"whatwg-fetch": "3.0.0",
|
|
"ws": "8.2.3"
|
|
},
|
|
"resolutions": {
|
|
"browserslist": "4.20.2",
|
|
"caniuse-lite": "1.0.30001406",
|
|
"@babel/core": "7.18.0",
|
|
"@babel/parser": "7.18.0",
|
|
"@babel/types": "7.18.0",
|
|
"@babel/traverse": "7.18.0"
|
|
},
|
|
"engines": {
|
|
"node": ">=14.6.0"
|
|
},
|
|
"packageManager": "pnpm@7.24.3"
|
|
}
|