feat: add tailwind support

.github/workflows/ci.yml

@@ -46,6 +46,7 @@ jobs:
         flag-for-router: ['', '--router']
         flag-for-pinia: ['', '--pinia']
         flag-for-vitest: ['', '--vitest']
+        flag-for-tailwind: ['', '--tailwind']
 
         # It's quite costly to install Cypress & Playwright even with cache.
         # Maybe we can split them into another job so that all the projects
@@ -68,6 +69,7 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-tailwind: '--tailwind'
 
           - node-version: 18
             os: macos-latest
@@ -77,6 +79,7 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-tailwind: '--tailwind'
 
           - node-version: 20
             os: ubuntu-latest
@@ -86,6 +89,7 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-tailwind: '--tailwind'
 
           - node-version: 16
             os: ubuntu-latest
@@ -95,10 +99,11 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-tailwind: '--tailwind'
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ matrix.os == 'windows-latest' }}
     env:
-      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }}
+      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{ matrix.flag-for-tailwind }}
       # Sometimes the Linux runner can't verify Cypress in 30s
       CYPRESS_VERIFY_TIMEOUT: 60000
     steps:

index.ts

@@ -82,6 +82,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: {
@@ -107,7 +108,8 @@ async function init() {
       argv.cypress ??
       argv.nightwatch ??
       argv.playwright ??
-      argv.eslint
+      argv.eslint ??
+      argv.tailwind
     ) === 'boolean'
 
   let targetDir = argv._[0]
@@ -129,6 +131,7 @@ async function init() {
     needsE2eTesting?: false | 'cypress' | 'nightwatch' | 'playwright'
     needsEslint?: boolean
     needsPrettier?: boolean
+    needsTailwind?: boolean
   } = {}
 
   try {
@@ -145,6 +148,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(
       [
         {
@@ -276,6 +280,14 @@ async function init() {
           initial: false,
           active: language.defaultToggleOptions.active,
           inactive: language.defaultToggleOptions.inactive
+        },
+        {
+          name: 'needsTailwind',
+          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
+          message: 'Add tailwind for styling?',
+          initial: false,
+          active: language.defaultToggleOptions.active,
+          inactive: language.defaultToggleOptions.inactive
         }
       ],
       {
@@ -301,7 +313,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.needsTailwind
   } = result
 
   const { needsE2eTesting } = result
@@ -429,6 +442,9 @@ async function init() {
       'utf-8'
     )
   }
+  if (needsTailwind) {
+    render('config/tailwind')
+  }
 
   // Render ESLint config
   if (needsEslint) {
@@ -543,7 +559,8 @@ async function init() {
       needsPlaywright,
       needsNightwatchCT,
       needsCypressCT,
-      needsEslint
+      needsEslint,
+      needsTailwind
     })
   )