feat(create-gatsby): Add Tailwind as a styling choice (#37944)

Co-authored-by: LekoArts <lekoarts@gmail.com>

Author: ChrisLaRocque

packages/create-gatsby/package.json

@@ -13,7 +13,8 @@
  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/create-gatsby#readme",
  "files": [
  "lib/index.js",
- "cli.js"
+ "cli.js",
+ "stubs/"
  ],
  "devDependencies": {
  "@ascorbic/worker-threads-shim": "^1.0.0",

packages/create-gatsby/src/index.ts

@@ -4,6 +4,7 @@ import styles from "./questions/styles.json"
 import features from "./questions/features.json"
 import languages from "./questions/languages.json"
 import { initStarter, getPackageManager, gitSetup } from "./init-starter"
+import { writeFiles, IFile } from "./write-files"
 import { installPlugins } from "./install-plugins"
 import colors from "ansi-colors"
 import path from "path"
@@ -27,7 +28,6 @@ export const DEFAULT_STARTERS: Record<keyof typeof languages, string> = {
  js: `https://github.com/gatsbyjs/gatsby-starter-minimal.git`,
  ts: `https://github.com/gatsbyjs/gatsby-starter-minimal-ts.git`,
 }
-
 interface IAnswers {
  name: string
  project: string
@@ -58,6 +58,14 @@ interface IPluginEntry {
  * Keys must match plugin names or name:key combinations from the plugins array
  */
  options?: PluginConfigMap
+ /**
+ * If the item is not a valid Gatsby plugin, set this to `false`
+ */
+ isGatsbyPlugin?: boolean
+ /**
+ * Additional files that should be written to the filesystem
+ */
+ files?: Array<IFile>
 }
 
 export type PluginMap = Record<string, IPluginEntry>
@@ -203,8 +211,12 @@ ${center(colors.blueBright.bold.underline(`Welcome to Gatsby!`))}
  )} for styling your site`
  )
  const extraPlugins = styles[answers.styling].plugins || []
-
- plugins.push(answers.styling, ...extraPlugins)
+ // If the key is not a valid Gatsby plugin, don't add it to the plugins array
+ if (styles[answers.styling]?.isGatsbyPlugin === false) {
+ plugins.push(...extraPlugins)
+ } else {
+ plugins.push(answers.styling, ...extraPlugins)
+ }
  packages.push(
  answers.styling,
  ...(styles[answers.styling].dependencies || []),
@@ -305,6 +317,12 @@ ${colors.bold(`Thanks! Here's what we'll now do:`)}
  reporter.info(`${maybeUseEmoji(`🔌 `)}Setting-up plugins...`)
  await installPlugins(plugins, pluginConfig, fullPath, [])
  }
+
+ if (answers.styling && styles[answers.styling]?.files) {
+ reporter.info(`${maybeUseEmoji(`🎨 `)}Adding necessary styling files...`)
+ await writeFiles(answers.project, styles[answers.styling].files)
+ }
+
  await setSiteMetadata(fullPath, `title`, siteName)
 
  await gitSetup(answers.project)

packages/create-gatsby/src/questions/styles.json

@@ -23,9 +23,30 @@
  },
  "gatsby-plugin-vanilla-extract": {
  "message": "vanilla-extract",
- "dependencies": [
- "@vanilla-extract/webpack-plugin",
- "@vanilla-extract/css"
+ "dependencies": ["@vanilla-extract/webpack-plugin", "@vanilla-extract/css"]
+ },
+ "tailwindcss": {
+ "message": "Tailwind CSS",
+ "plugins": ["gatsby-plugin-postcss"],
+ "dependencies": ["postcss", "autoprefixer", "gatsby-plugin-postcss"],
+ "isGatsbyPlugin": false,
+ "files": [
+ {
+ "source": "stubs/tailwindcss/gatsby-browser.js",
+ "targetPath": "gatsby-browser.js"
+ },
+ {
+ "source": "stubs/tailwindcss/global.css",
+ "targetPath": "src/styles/global.css"
+ },
+ {
+ "source": "stubs/tailwindcss/postcss.config.js",
+ "targetPath": "postcss.config.js"
+ },
+ {
+ "source": "stubs/tailwindcss/tailwind.config.js",
+ "targetPath": "tailwind.config.js"
+ }
  ]
  }
 }

packages/create-gatsby/src/write-files.ts

@@ -0,0 +1,37 @@
+import * as fs from "fs-extra"
+import path from "path"
+
+export interface IFile {
+ source: string
+ targetPath: string
+}
+
+async function writeFile({ source, targetPath }: IFile): Promise<void> {
+ // Read the stub
+ const stubData = await fs.readFile(source)
+ // Write stub to targetPath
+ await fs.outputFile(targetPath, stubData)
+}
+
+export async function writeFiles(
+ rootPath: string,
+ files: Array<IFile> | undefined
+): Promise<void> {
+ if (!files) {
+ return
+ }
+
+ // Necessary to grab files from the stub/ dir
+ const createGatsbyRoot = path.join(__dirname, `..`)
+ // Creating files in parallel
+ const results = []
+
+ for (const file of files) {
+ const source = path.resolve(createGatsbyRoot, file.source)
+ const targetPath = path.resolve(rootPath, file.targetPath)
+
+ results.push(writeFile({ source, targetPath }))
+ }
+
+ await Promise.all(results)
+}

packages/create-gatsby/stubs/tailwindcss/gatsby-browser.js

@@ -0,0 +1 @@
+import "./src/styles/global.css"

packages/create-gatsby/stubs/tailwindcss/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/create-gatsby/stubs/tailwindcss/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}

packages/create-gatsby/stubs/tailwindcss/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ `./src/pages/**/*.{js,jsx,ts,tsx}`,
+ `./src/components/**/*.{js,jsx,ts,tsx}`,
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}