@develate/quasar-app-extension-quasar-ext-tailwind 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Thorsten
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# Quasar App Extension "@develate/quasar-ext-tailwind"
+
+Adds [Tailwind CSS v4](https://tailwindcss.com) to a Quasar (Vite) app.
+
+## Install
+
+```bash
+quasar ext add @develate/quasar-ext-tailwind
+```
+
+This will:
+
+- add `tailwindcss`, `@tailwindcss/vite` and `@tailwindcss/postcss` to your app's
+  devDependencies,
+- create `/src/css/tailwind.css`,
+- add `'tailwind.css'` to the `css` array of your quasar.config file.
+
+On each dev/build, the extension registers the `@tailwindcss/vite` plugin, so
+there is nothing else to configure.
+
+## Uninstall
+
+```bash
+quasar ext remove @develate/quasar-ext-tailwind
+```
+
+This removes `/src/css/tailwind.css` and its `css` array entry. The Tailwind
+packages themselves are left in your package.json — uninstall them yourself if
+nothing else needs them.
+
+## Info
+
+`/src/css/tailwind.css` is yours to edit — that is where you import Tailwind and
+declare your `@theme`. It ships with the `tw` prefix (`tw:flex`, `tw:p-4`, ...)
+so that Tailwind utilities cannot collide with Quasar's own classes.
+
+Tailwind's preflight is included by default and resets browser styles globally,
+which changes how some Quasar components look. To keep Quasar's baseline, import
+the Tailwind layers you want instead of the whole package:
+
+```css
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw);
+```
+
+`@tailwindcss/postcss` is installed for tooling that goes through PostCSS (and
+for editor integrations that look for it); the app itself is built with the Vite
+plugin.
+
+## Donate
+
+If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@develate/quasar-app-extension-quasar-ext-tailwind",
+  "version": "1.0.2",
+  "description": "Tailwind CSS v4 for Quasar",
+  "keywords": [
+    "quasar",
+    "quasar-app-extension",
+    "quasar-app-vite",
+    "quasar-cli",
+    "tailwind",
+    "tailwindcss",
+    "vue",
+    "vuejs"
+  ],
+  "license": "MIT",
+  "author": "Thorsten <thorsten@develate.com>",
+  "homepage": "https://github.com/develate/quasar-ext-tailwind#readme",
+  "bugs": "https://github.com/develate/quasar-ext-tailwind/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/develate/quasar-ext-tailwind.git",
+    "directory": "ae"
+  },
+  "type": "module",
+  "main": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "imports": {
+    "#q-app": "@quasar/app-vite"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "^3.3.0",
+    "quasar": "^2.23.3",
+    "vue": "^3.5.39"
+  },
+  "peerDependencies": {
+    "@quasar/app-vite": "^3.3.0"
+  },
+  "engines": {
+    "node": ">= 26 || ^24 || ^22.12"
+  }
+}

package/src/index.js

@@ -0,0 +1,27 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ */
+
+import { defineIndexScript } from '#q-app'
+
+// can be async
+export default defineIndexScript(api => {
+  api.compatibleWith('quasar', '^2.0.0')
+  api.compatibleWith('@quasar/app-vite', '^3.3.0')
+
+  // not fatal: the packages are added by the install script, which runs
+  // before they are actually put into node_modules by the packager
+  if (api.hasPackage('tailwindcss', '^4.0.0') === false) {
+    api.logger.warn(
+      'Tailwind CSS v4 is not installed. Run' +
+        ` "quasar ext invoke ${api.extId}" to set it up.`
+    )
+  }
+
+  api.extendQuasarConf(conf => {
+    conf.build.vitePlugins.push(['@tailwindcss/vite', {}])
+  })
+})

package/src/install.js

@@ -0,0 +1,52 @@
+/**
+ * Quasar App Extension install script
+ * https://quasar.dev/app-extensions/development-guide/install-api
+ */
+
+import { basename } from 'node:path'
+import { defineInstallScript } from '#q-app'
+
+import { addCssEntry } from './lib/quasar-config-css.js'
+
+const tailwindVersion = '^4.3.3'
+const cssFile = 'tailwind.css'
+const cssTarget = `src/css/${cssFile}`
+
+// can be async
+export default defineInstallScript(api => {
+  api.compatibleWith('quasar', '^2.0.0')
+  api.compatibleWith('@quasar/app-vite', '^3.3.0')
+
+  api.extendPackageJson({
+    devDependencies: {
+      '@tailwindcss/postcss': tailwindVersion,
+      '@tailwindcss/vite': tailwindVersion,
+      tailwindcss: tailwindVersion
+    }
+  })
+
+  api.renderFile(`./templates/${cssFile}`, cssTarget)
+
+  const configFile = api.ctx.appPaths.quasarConfigFilename
+  const configName = basename(configFile)
+
+  let status
+
+  try {
+    status = addCssEntry(configFile, cssFile)
+  } catch (err) {
+    api.logger.warn(`Could not read/write ${configName}: ${err.message}`)
+    status = 'unsupported'
+  }
+
+  if (status === 'added') {
+    api.logger.log(`Added "${cssFile}" to ${configName} > css`)
+  } else if (status === 'already-present') {
+    api.logger.log(`"${cssFile}" is already in ${configName} > css`)
+  } else {
+    api.onExitLog(
+      `Could not locate the "css" array in ${configName}.` +
+        ` Please add "${cssFile}" to it yourself.`
+    )
+  }
+})

package/src/lib/quasar-config-css.js

@@ -0,0 +1,101 @@
+/**
+ * Helpers to add/remove an entry from the "css" array of the host app's
+ * quasar.config file.
+ *
+ * That file is user-owned source code (js or ts), so it gets edited as text
+ * rather than parsed: only the first "css: [ ... ]" array is touched and the
+ * surrounding formatting is preserved as much as possible.
+ */
+
+import fs from 'node:fs'
+
+const cssArrayRegex = /\bcss\s*:\s*\[([^\]]*)\]/
+
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function matchCssArray(source) {
+  const match = source.match(cssArrayRegex)
+
+  if (match === null) return null
+
+  const inner = match[1]
+  const start = match.index + match[0].indexOf('[') + 1
+
+  return { inner, start, end: start + inner.length }
+}
+
+function replaceInner(source, { start, end }, newInner) {
+  return source.slice(0, start) + newInner + source.slice(end)
+}
+
+/**
+ * @param {string} configFile (absolute path to the quasar.config file)
+ * @param {string} entry (example: 'tailwind.css')
+ * @return {'added' | 'already-present' | 'unsupported'}
+ */
+export function addCssEntry(configFile, entry) {
+  const source = fs.readFileSync(configFile, 'utf8')
+  const cssArray = matchCssArray(source)
+
+  if (cssArray === null) return 'unsupported'
+
+  const { inner } = cssArray
+
+  if (new RegExp(`(["'])${escapeRegExp(entry)}\\1`).test(inner)) {
+    return 'already-present'
+  }
+
+  // follow whatever quote style the app is already using
+  const quote = inner.match(/["']/)?.[0] ?? "'"
+  const item = `${quote}${entry}${quote}`
+
+  let newInner
+
+  if (inner.trim() === '') {
+    newInner = item
+  } else if (inner.includes('\n')) {
+    const indent = inner.match(/\n([ \t]*)\S/)?.[1] ?? '  '
+    const tail = inner.match(/\n[ \t]*$/)?.[0] ?? '\n'
+    newInner = `${inner.replace(/,?\s*$/, '')},\n${indent}${item}${tail}`
+  } else {
+    newInner = `${inner.replace(/,\s*$/, '')}, ${item}`
+  }
+
+  fs.writeFileSync(configFile, replaceInner(source, cssArray, newInner), 'utf8')
+  return 'added'
+}
+
+/**
+ * @param {string} configFile (absolute path to the quasar.config file)
+ * @param {string} entry (example: 'tailwind.css')
+ * @return {'removed' | 'missing' | 'unsupported'}
+ */
+export function removeCssEntry(configFile, entry) {
+  const source = fs.readFileSync(configFile, 'utf8')
+  const cssArray = matchCssArray(source)
+
+  if (cssArray === null) return 'unsupported'
+
+  const { inner } = cssArray
+  const itemRegex = new RegExp(
+    `[^\\S\\n]*(["'])${escapeRegExp(entry)}\\1[^\\S\\n]*,?`
+  )
+
+  if (itemRegex.test(inner) === false) return 'missing'
+
+  let newInner = inner
+    .replace(itemRegex, '')
+    // the removed item might have left an empty line behind
+    .replace(/\n[ \t]*(?=\n)/g, '')
+    // ...or a dangling comma, if it was the last item
+    .replace(/,([^\S\n]*(?:\n[ \t]*)?)$/, '$1')
+    // ...or a leading space, if it was the first one
+    .replace(/^[^\S\n]+(?=\S)/, '')
+
+  if (newInner.trim() === '') newInner = ''
+
+  fs.writeFileSync(configFile, replaceInner(source, cssArray, newInner), 'utf8')
+  return 'removed'
+}

package/src/templates/tailwind.css

@@ -0,0 +1,12 @@
+@import 'tailwindcss' prefix(tw);
+
+@theme {
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}

package/src/uninstall.js

@@ -0,0 +1,44 @@
+/**
+ * Quasar App Extension uninstall script
+ * https://quasar.dev/app-extensions/development-guide/uninstall-api
+ */
+
+import { basename } from 'node:path'
+import { defineUninstallScript } from '#q-app'
+
+import { removeCssEntry } from './lib/quasar-config-css.js'
+
+const cssFile = 'tailwind.css'
+const cssTarget = `src/css/${cssFile}`
+
+// can be async
+export default defineUninstallScript(api => {
+  const configFile = api.ctx.appPaths.quasarConfigFilename
+  const configName = basename(configFile)
+
+  let status
+
+  try {
+    status = removeCssEntry(configFile, cssFile)
+  } catch (err) {
+    api.logger.warn(`Could not read/write ${configName}: ${err.message}`)
+    status = 'unsupported'
+  }
+
+  if (status === 'removed') {
+    api.logger.log(`Removed "${cssFile}" from ${configName} > css`)
+  } else if (status === 'unsupported') {
+    api.onExitLog(
+      `Could not locate the "css" array in ${configName}.` +
+        ` Please remove "${cssFile}" from it yourself.`
+    )
+  }
+
+  api.removePath(cssTarget)
+
+  api.onExitLog(
+    'The Tailwind packages (tailwindcss, @tailwindcss/vite,' +
+      ' @tailwindcss/postcss) are still in your package.json.' +
+      ' Uninstall them if nothing else needs them.'
+  )
+})