feat(create-app): add optional Tailwind CSS scaffold setup

docs/commands/create-app.md

@@ -43,6 +43,7 @@ You can run `pnpm create @dhis2/app@alpha --help` for the list of options availa
   --typescript, --ts, --typeScript          Use TypeScript or JS       [boolean]
   --template                                Which template to use (Basic, With
                                             React Router)               [string]
+  --tailwind                                Enable Tailwind CSS setup   [boolean]
   --packageManager, --package,              Package Manager
   --packagemanager                                                      [string]
 ```
@@ -58,6 +59,12 @@ pnpm create @dhis2/app my-app --yes
 # use the default settings but override the template
 pnpm create @dhis2/app my-app --yes --template react-router
 
+# use optional Tailwind CSS setup with the basic template
+pnpm create @dhis2/app my-app --yes --tailwind
+
+# use optional Tailwind CSS setup with the react-router template
+pnpm create @dhis2/app my-app --yes --template react-router --tailwind
+
 # use yarn as a package manager (and prompt for other settings)
 pnpm create @dhis2/app my-app --packageManager yarn
 

packages/create-app/src/index.js

@@ -1,7 +1,7 @@
 const { execSync } = require('child_process')
 const path = require('path')
 const { reporter, exec, chalk } = require('@dhis2/cli-helpers-engine')
-const { input, select } = require('@inquirer/prompts')
+const { input, select, confirm } = require('@inquirer/prompts')
 const fg = require('fast-glob')
 const fs = require('fs-extra')
 const { default: getPackageManager } = require('./utils/getPackageManager')
@@ -26,6 +26,14 @@ const templates = {
         __dirname,
         '../templates/template-ts-dataelements-react-router'
     ),
+    templateWithListTailwind: path.join(
+        __dirname,
+        '../templates/template-ts-dataelements-tailwind'
+    ),
+    templateWithReactRouterTailwind: path.join(
+        __dirname,
+        '../templates/template-ts-dataelements-react-router-tailwind'
+    ),
 }
 
 const commandHandler = {
@@ -48,6 +56,10 @@ const commandHandler = {
             description: 'Which template to use (Basic, With React Router)',
             type: 'string',
         },
+        tailwind: {
+            description: 'Enable Tailwind CSS setup',
+            type: 'boolean',
+        },
         packageManager: {
             description: 'Package Manager',
             type: 'string',
@@ -56,9 +68,15 @@ const commandHandler = {
     },
 }
 
-const getTemplateDirectory = (templateName) => {
-    return templateName === 'react-router'
-        ? templates.templateWithReactRouter
+const getTemplateDirectory = (templateName, tailwind) => {
+    if (templateName === 'react-router') {
+        return tailwind
+            ? templates.templateWithReactRouterTailwind
+            : templates.templateWithReactRouter
+    }
+
+    return tailwind
+        ? templates.templateWithListTailwind
         : templates.templateWithList
 }
 
@@ -87,6 +105,7 @@ const command = {
             packageManager:
                 argv.packageManager ?? getPackageManager() ?? 'pnpm',
             templateName: argv.template ?? 'basic',
+            tailwind: argv.tailwind ?? false,
         }
 
         if (!useDefauls) {
@@ -118,6 +137,13 @@ const command = {
 
                 selectedOptions.templateName = template
             }
+
+            if (argv.tailwind === undefined) {
+                selectedOptions.tailwind = await confirm({
+                    message: 'Would you like to enable Tailwind CSS?',
+                    default: false,
+                })
+            }
         }
 
         reporter.info(
@@ -158,7 +184,10 @@ const command = {
         }
 
         reporter.info('Copying template files')
-        const templateFiles = getTemplateDirectory(selectedOptions.templateName)
+        const templateFiles = getTemplateDirectory(
+            selectedOptions.templateName,
+            selectedOptions.tailwind
+        )
         fs.copySync(templateFiles, cwd)
 
         const paths = {

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/.gitignore

@@ -0,0 +1,5 @@
+# DHIS2 Platform
+node_modules
+.d2
+src/locales
+build

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/.prettierrc.mjs

@@ -0,0 +1,10 @@
+import prettierConfig from '@dhis2/config-prettier'
+
+/**
+ * @type {import("prettier").Config}
+ */
+const config = {
+    ...prettierConfig,
+}
+
+export default config

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/README.md

@@ -0,0 +1,45 @@
+This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner and runs all available tests found in `/src`.<br />
+
+See the section about [running tests](https://platform.dhis2.nu/#/scripts/test) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+A deployable `.zip` file can be found in `build/bundle`!
+
+See the section about [building](https://platform.dhis2.nu/#/scripts/build) for more information.
+
+### `yarn deploy`
+
+Deploys the built app in the `build` folder to a running DHIS2 instance.<br />
+This command will prompt you to enter a server URL as well as the username and password of a DHIS2 user with the App Management authority.<br/>
+You must run `yarn build` before running `yarn deploy`.<br />
+
+See the section about [deploying](https://platform.dhis2.nu/#/scripts/deploy) for more information.
+
+## Learn More
+
+You can learn more about the platform in the [DHIS2 Application Platform Documentation](https://platform.dhis2.nu/).
+
+You can learn more about the runtime in the [DHIS2 Application Runtime Documentation](https://runtime.dhis2.nu/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/d2.config.js

@@ -0,0 +1,12 @@
+/** @type {import('@dhis2/cli-app-scripts').D2Config} */
+const config = {
+    type: 'app',
+
+    entryPoints: {
+        app: './src/AppWrapper.tsx',
+    },
+
+    viteConfigExtensions: './viteConfigExtensions.mts',
+}
+
+module.exports = config

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/eslint.config.mjs

@@ -0,0 +1,13 @@
+import config from '@dhis2/config-eslint'
+import { defineConfig } from 'eslint/config'
+import { includeIgnoreFile } from '@eslint/compat'
+import { fileURLToPath } from 'node:url'
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url))
+
+export default defineConfig([
+    includeIgnoreFile(gitignorePath, 'Imported .gitignore patterns'),
+    {
+        extends: [config],
+    },
+])

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/i18n/en.pot

@@ -0,0 +1,39 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2026-01-03T10:13:09.567Z\n"
+"PO-Revision-Date: 2026-01-03T10:13:09.567Z\n"
+
+msgid "ERROR"
+msgstr "ERROR"
+
+msgid "Loading..."
+msgstr "Loading..."
+
+msgid "Hello {{name}}"
+msgstr "Hello {{name}}"
+
+msgid "Error"
+msgstr "Error"
+
+msgid "Error loading the data elements"
+msgstr "Error loading the data elements"
+
+msgid "ID"
+msgstr "ID"
+
+msgid "Name"
+msgstr "Name"
+
+msgid "Domain"
+msgstr "Domain"
+
+msgid "Value Type"
+msgstr "Value Type"
+
+msgid "Created by"
+msgstr "Created by"

packages/create-app/templates/template-ts-dataelements-react-router-tailwind/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "{{template-name}}",
+    "version": "1.0.0",
+    "description": "",
+    "license": "BSD-3-Clause",
+    "private": true,
+    "packageManager": "pnpm@10.13.1",
+    "scripts": {
+        "build": "d2-app-scripts build",
+        "start": "d2-app-scripts start",
+        "test": "d2-app-scripts test",
+        "deploy": "d2-app-scripts deploy",
+        "lint": "eslint && prettier -c .",
+        "format": "prettier . -w"
+    },
+    "dependencies": {
+        "@dhis2/app-runtime": "^3.15.1",
+        "@dhis2/ui": "^10.11.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router": "^7.11.0"
+    },
+    "devDependencies": {
+        "@dhis2/cli-app-scripts": "12.10.3",
+        "@dhis2/config-eslint": "^0.2.2",
+        "@dhis2/config-prettier": "^0.2.2",
+        "@eslint/compat": "^2.0.0",
+        "@types/jest": "^30.0.0",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "eslint": "^9.39.2",
+        "prettier": "^3.7.4",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.0",
+        "@tailwindcss/vite": "^4.1.0",
+        "tailwindcss": "^4.1.0"
+    }
+}