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

packages/create-gatsby/src/__tests__/run.ts

@@ -182,7 +182,8 @@ describe(`run`, () => {
         DEFAULT_STARTERS.js,
         dirName,
         [],
-        dirName
+        dirName,
+        false
       )
     })
     it(`should track JS was selected as language`, async () => {
@@ -208,7 +209,8 @@ describe(`run`, () => {
         DEFAULT_STARTERS.js,
         dirName,
         [],
-        siteName
+        siteName,
+        false
       )
     })
     it(`should track JS was selected as language`, async () => {
@@ -234,7 +236,8 @@ describe(`run`, () => {
         DEFAULT_STARTERS.ts,
         dirName,
         [],
-        siteName
+        siteName,
+        false
       )
     })
 
@@ -262,7 +265,8 @@ describe(`skip and ts flag`, () => {
       DEFAULT_STARTERS.ts,
       dirName,
       [],
-      dirName
+      dirName,
+      false
     )
   })
   it(`should track TS was selected as language`, async () => {

packages/create-gatsby/src/index.ts

@@ -203,8 +203,12 @@ ${center(colors.blueBright.bold.underline(`Welcome to Gatsby!`))}
       )} for styling your site`
     )
     const extraPlugins = styles[answers.styling].plugins || []
-
-    plugins.push(answers.styling, ...extraPlugins)
+    // Tailwind doesn't have a gatsby plugin, but requires the postcss plugin
+    if (answers.styling !== `tailwindcss`) {
+      plugins.push(answers.styling, ...extraPlugins)
+    } else {
+      plugins.push(...extraPlugins)
+    }
     packages.push(
       answers.styling,
       ...(styles[answers.styling].dependencies || []),
@@ -294,7 +298,8 @@ ${colors.bold(`Thanks! Here's what we'll now do:`)}
     starter,
     answers.project,
     packages.map((plugin: string) => plugin.split(`:`)[0]),
-    npmSafeSiteName
+    npmSafeSiteName,
+    answers.styling == `tailwindcss`
   )
 
   reporter.success(`Created site in ${colors.green(answers.project)}`)

packages/create-gatsby/src/init-starter.ts

@@ -170,7 +170,8 @@ const install = async (
 const clone = async (
   url: string,
   rootPath: string,
-  branch?: string
+  branch?: string,
+  useTailwind?: boolean
 ): Promise<void> => {
   const branchProps = branch ? [`-b`, branch] : []
   const stop = spin(`Cloning site template`)
@@ -196,6 +197,59 @@ const clone = async (
   await fs.remove(path.join(rootPath, `.git`))
 
   await fs.remove(path.join(rootPath, `LICENSE`))
+
+  if (useTailwind) {
+    // Add tailwind specific files as outlined in their installation guide: https://tailwindcss.com/docs/guides/gatsby
+    const files = [
+      {
+        path: `gatsby-browser.js`,
+        content: `import './src/styles/global.css'`,
+      },
+      {
+        path: `tailwind.config.js`,
+        content: `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,jsx,ts,tsx}",
+    "./src/components/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`,
+      },
+      {
+        path: `postcss.config.js`,
+        content: `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`,
+      },
+      {
+        path: `/src/styles/global.css`,
+        content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;`,
+      },
+    ]
+    // Need /src/styles to exist to write global.css
+    await fs.mkdir(path.join(rootPath, `/src/styles`), err => {
+      if (err) {
+        console.error(`Error creating /src/styles`, err)
+      }
+    })
+    // Write files to system
+    files.forEach(async file => {
+      await fs.writeFile(path.join(rootPath, file.path), file.content, err => {
+        if (err) {
+          console.error(`Error writing ${file.path}`, err)
+        }
+      })
+    })
+  }
 }
 
 export async function gitSetup(rootPath: string): Promise<void> {
@@ -211,11 +265,12 @@ export async function initStarter(
   starter: string,
   rootPath: string,
   packages: Array<string>,
-  npmSafeSiteName: string
+  npmSafeSiteName: string,
+  useTailwind?: boolean
 ): Promise<void> {
   const sitePath = path.resolve(rootPath)
 
-  await clone(starter, sitePath)
+  await clone(starter, sitePath, undefined, useTailwind)
 
   await setNameInPackage(sitePath, npmSafeSiteName)
 

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

@@ -23,9 +23,11 @@
   },
   "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"]
   }
 }