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

Co-authored-by: LekoArts <[email protected]>

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: [],
+}