Add tailwind as an option

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