Add support for Tailwind CSS v4.

index.ts

@@ -27,6 +27,7 @@ const FEATURE_FLAGS = [
   'default',
   'ts',
   'typescript',
+  'tailwindcss',
   'jsx',
   'router',
   'vue-router',
@@ -49,6 +50,10 @@ const FEATURE_OPTIONS = [
     value: 'typescript',
     label: language.needsTypeScript.message,
   },
+  {
+    value: 'tailwindcss',
+    label: language.needsTailwindCss.message,
+  },
   {
     value: 'jsx',
     label: language.needsJsx.message,
@@ -170,6 +175,8 @@ Available feature flags:
     Create a project with the default configuration without any additional features.
   --ts, --typescript
     Add TypeScript support.
+  --tailwindcss
+    Add Tailwind CSS support.
   --jsx
     Add JSX support.
   --router, --vue-router
@@ -350,6 +357,7 @@ async function init() {
   const { features, experimentFeatures } = result
 
   const needsTypeScript = argv.ts || argv.typescript || features.includes('typescript')
+  const needsTailwindCss = argv.tailwindcss || features.includes('tailwindcss')
   const needsJsx = argv.jsx || features.includes('jsx')
   const needsRouter = argv.router || argv['vue-router'] || features.includes('router')
   const needsPinia = argv.pinia || features.includes('pinia')
@@ -400,6 +408,9 @@ async function init() {
   if (needsJsx) {
     render('config/jsx')
   }
+  if (needsTailwindCss) {
+    render('config/tailwindcss')
+  }
   if (needsRouter) {
     render('config/router')
   }
@@ -519,6 +530,7 @@ async function init() {
   // Render code template.
   // prettier-ignore
   const codeTemplate =
+    (needsTailwindCss ? 'tailwindcss-' : '') +
     (needsTypeScript ? 'typescript-' : '') +
     (needsRouter ? 'router' : 'default')
   render(`code/${codeTemplate}`)

locales/en-US.json

@@ -21,6 +21,9 @@
   "needsTypeScript": {
     "message": "TypeScript"
   },
+  "needsTailwindCss": {
+    "message": "Tailwind CSS"
+  },
   "needsJsx": {
     "message": "JSX Support"
   },

locales/fr-FR.json

@@ -21,6 +21,9 @@
   "needsTypeScript": {
     "message": "TypeScript"
   },
+  "needsTailwindCss": {
+    "message": "Tailwind CSS"
+  },
   "needsJsx": {
     "message": "Support de JSX"
   },

locales/tr-TR.json

@@ -21,6 +21,9 @@
   "needsTypeScript": {
     "message": "TypeScript"
   },
+  "needsTailwindCss": {
+    "message": "Tailwind CSS"
+  },
   "needsJsx": {
     "message": "JSX Desteği"
   },

locales/zh-Hans.json

@@ -21,6 +21,9 @@
   "needsTypeScript": {
     "message": "TypeScript"
   },
+  "needsTailwindCss": {
+    "message": "Tailwind CSS"
+  },
   "needsJsx": {
     "message": "JSX 支持"
   },

locales/zh-Hant.json

@@ -21,6 +21,9 @@
   "needsTypeScript": {
     "message": "TypeScript"
   },
+  "needsTailwindCss": {
+    "message": "Tailwind CSS"
+  },
   "needsJsx": {
     "message": "JSX 支援"
   },