Add tailwind as an option

Author: medaminefh

index.ts

@@ -78,6 +78,7 @@ async function init() {
   // --playwright
   // --eslint
   // --eslint-with-prettier (only support prettier through eslint for simplicity)
+  // --tailwind
   // --force (for force overwriting)
   const argv = minimist(process.argv.slice(2), {
     alias: {
@@ -102,7 +103,8 @@ async function init() {
       argv.vitest ??
       argv.cypress ??
       argv.playwright ??
-      argv.eslint
+      argv.eslint ??
+      argv.tailwind
     ) === 'boolean'
 
   let targetDir = argv._[0]
@@ -122,6 +124,7 @@ async function init() {
     needsE2eTesting?: false | 'cypress' | 'playwright'
     needsEslint?: boolean
     needsPrettier?: boolean
+    needsTailwind?: boolean
   } = {}
 
   try {
@@ -137,6 +140,7 @@ async function init() {
     // - Add Playwright for end-to-end testing?
     // - Add ESLint for code quality?
     // - Add Prettier for code formatting?
+    // - Add Tailwind for styling?
     result = await prompts(
       [
         {
@@ -252,6 +256,14 @@ async function init() {
           initial: false,
           active: 'Yes',
           inactive: 'No'
+        },
+        {
+          name: 'needsTailwind',
+          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
+          message: 'Add TailwindCss for styling?',
+          initial: false,
+          active: 'Yes',
+          inactive: 'No'
         }
       ],
       {
@@ -277,7 +289,8 @@ async function init() {
     needsPinia = argv.pinia,
     needsVitest = argv.vitest || argv.tests,
     needsEslint = argv.eslint || argv['eslint-with-prettier'],
-    needsPrettier = argv['eslint-with-prettier']
+    needsPrettier = argv['eslint-with-prettier'],
+    needsTailwind = argv['tailwind']
   } = result
 
   const { needsE2eTesting } = result
@@ -357,6 +370,11 @@ async function init() {
     renderEslint(root, { needsTypeScript, needsCypress, needsCypressCT, needsPrettier })
   }
 
+  // Render tailwind config
+  if (needsTailwind) {
+    render('config/tailwind')
+  }
+
   // Render code template.
   // prettier-ignore
   const codeTemplate =
@@ -440,14 +458,17 @@ async function init() {
       needsCypress,
       needsPlaywright,
       needsCypressCT,
-      needsEslint
+      needsEslint,
+      needsTailwind
     })
   )
 
   console.log(`\nDone. Now run:\n`)
   if (root !== cwd) {
     const cdProjectName = path.relative(cwd, root)
-    console.log(`  ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`)
+    console.log(
+      `  ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`
+    )
   }
   console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
   if (needsPrettier) {

template/config/tailwind/package.json

@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.2"
+  }
+}

template/config/tailwind/postcss.config.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

template/config/tailwind/src/assets/main.css

@@ -0,0 +1,39 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

template/config/tailwind/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

utils/generateReadme.ts

@@ -23,14 +23,17 @@ export default function generateReadme({
   needsCypressCT,
   needsPlaywright,
   needsVitest,
-  needsEslint
+  needsEslint,
+  needsTailwind
 }) {
   const commandFor = (scriptName: string, args?: string) =>
     getCommand(packageManager, scriptName, args)
 
   let readme = `# ${projectName}
 
-This template should help get you started developing with Vue 3 in Vite.
+This template should help get you started developing with Vue 3 ${
+    needsTailwind ? 'alongside [TailwindCSS](https://tailwindcss.com/) ' : ''
+  }in Vite.
 
 ## Recommended IDE Setup