fix(css): ensure tailwind whitelisting without overriding

Author: larbish

docs/app/assets/css/main.css

@@ -1,9 +1,3 @@
-@import "tailwindcss";
-@import "@nuxt/ui-pro";
-
-@source "../../../content/**/*";
-@source "../../../../layer/app/**/*";
-
 @theme static {
   --font-sans: 'Public Sans', sans-serif;
   --container-8xl: 90rem;

docs/content/en/2.concepts/4.theme.md

@@ -16,30 +16,12 @@ For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.
 
 You can customize your theme with CSS variables inside a [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) directive to define your project's custom design tokens, like fonts, colors, and breakpoints
 
-You can override this theme by creating your own `main.css` file in your application.
-
-::warning
-To ensure a good behaviour with Docus, you must always start by importing `tailwindcss` and `ui-pro` but also source `content/` files and `app.config.ts` :
-
-```css [app/assets/css/main.css]
-@import "tailwindcss";
-@import "@nuxt/ui-pro";
-
-@source "../../../content/**/*";
-@source "../../../node_modules/docus/app/**/*";
-```
-::
+You can override this theme by creating a `main.css` file in your application.
 
 This way you can override your theme:
 
 ::code-group
 ```css [assets/css/main.css]
-@import "tailwindcss";
-@import "@nuxt/ui-pro";
-
-@source "../../../content/**/*";
-@source "../../../node_modules/docus/app/**/*";
-
 @theme static {
   --font-sans: 'Public Sans', sans-serif;
 

docs/content/fr/2.concepts/4.theme.md

@@ -15,30 +15,12 @@ Pour un aperçu complet du système de thème Nuxt UI, consultez la documentatio
 
 Vous pouvez personnaliser votre thème avec des variables CSS à l'intérieur d'une directive [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) pour définir les tokens de design personnalisés de votre projet, comme les polices, couleurs et breakpoints.
 
-Vous pouvez surcharger ce thème en créant votre propre fichier `main.css` dans votre application.
-
-::warning
-Pour garantir un bon fonctionnement avec Docus, vous devez toujours commencer par importer `tailwindcss` et `ui-pro` mais aussi sourcer les fichiers `content/` et `app.config.ts` :
-
-```css [app/assets/css/main.css]
-@import "tailwindcss";
-@import "@nuxt/ui-pro";
-
-@source "../../../content/**/*";
-@source "../../../node_modules/docus/app/**/*";
-```
-::
+Vous pouvez surcharger ce thème en créant un fichier `main.css` dans votre application.
 
 De cette façon, vous pouvez surcharger votre thème :
 
 ::code-group
 ```css [assets/css/main.css]
-@import "tailwindcss";
-@import "@nuxt/ui-pro";
-
-@source "../../../content/**/*";
-@source "../../../node_modules/docus/app/**/*";
-
 @theme static {
   --font-sans: 'Public Sans', sans-serif;
 

docs/nuxt.config.ts

@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  extends: ['docus'],
   modules: ['@nuxtjs/plausible', '@nuxtjs/i18n'],
   css: ['~/assets/css/main.css'],
   site: {

docs/package.json

@@ -3,8 +3,8 @@
   "description": "Official documentation for Docus, also used as playground.",
   "type": "module",
   "scripts": {
-    "build": "nuxt build --extends docus",
-    "dev": "nuxt dev --extends docus"
+    "build": "nuxt build",
+    "dev": "nuxt dev"
   },
   "dependencies": {
     "@nuxtjs/i18n": "^10.0.3",

layer/app/assets/css/main.css

@@ -5,7 +5,7 @@ import { getGitBranch, getGitEnv, getLocalGitInfo } from '../utils/git'
 
 export default defineNuxtModule({
   meta: {
-    name: 'default-configs',
+    name: 'config',
   },
   async setup(_options, nuxt) {
     const dir = nuxt.options.rootDir

layer/modules/default-configs.ts renamed to layer/modules/config.ts

@@ -0,0 +1,26 @@
+import { defineNuxtModule, addTemplate } from '@nuxt/kit'
+import { joinURL } from 'ufo'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'css',
+  },
+  async setup(_options, nuxt) {
+    const dir = nuxt.options.rootDir
+
+    const contentDir = joinURL(dir, 'content')
+
+    const cssTemplate = addTemplate({
+      filename: 'docus.css',
+      getContents: () => {
+        return `@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "${contentDir.replace(/\\/g, '/')}/**/*";
+@source "../../app.config.ts";`
+      },
+    })
+
+    nuxt.options.css.push(cssTemplate.dst)
+  },
+})

layer/modules/css.ts

@@ -4,8 +4,9 @@ const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
   modules: [
-    resolve('./modules/default-configs'),
+    resolve('./modules/config'),
     resolve('./modules/routing'),
+    resolve('./modules/css'),
     '@nuxt/ui-pro',
     '@nuxt/content',
     '@nuxt/image',
@@ -26,7 +27,6 @@ export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
-  css: [resolve('./app/assets/css/main.css')],
   content: {
     build: {
       markdown: {