diff --git a/docs/content/2.tailwind/1.config.md b/docs/content/2.tailwind/1.config.md index 2d3cef5a..4f9a3ae7 100644 --- a/docs/content/2.tailwind/1.config.md +++ b/docs/content/2.tailwind/1.config.md @@ -188,7 +188,7 @@ If you want to fully overwrite its value, you can use a `function` that receives ```js{}[tailwind.config.js] export default { content (contentDefaults) { - return tailwindContent + return [...contentDefaults.filter((c) => c.endsWith('*.vue')), './my-components/**/*.vue', `${srcDir}/themes/**/*.js`] } } ``` diff --git a/src/module.ts b/src/module.ts index b6b4c597..5a360d64 100644 --- a/src/module.ts +++ b/src/module.ts @@ -115,8 +115,9 @@ export default defineNuxtModule({ configPaths.forEach(path => nuxt.options.watch.push(path)) } + // Default tailwind config + let tailwindConfig: any = defuArrayFn(moduleOptions.config, { content: contentPaths }) // Recursively resolve each config and merge tailwind configs together. - let tailwindConfig: any = {} for (const configPath of configPaths) { let _tailwindConfig try { @@ -126,18 +127,14 @@ export default defineNuxtModule({ } // Transform purge option from Array to object with { content } - if (_tailwindConfig && Array.isArray(_tailwindConfig.purge)) { + if (_tailwindConfig && Array.isArray(_tailwindConfig.purge) && !_tailwindConfig.content) { _tailwindConfig.content = _tailwindConfig.purge } - - tailwindConfig = defu(_tailwindConfig || {}, tailwindConfig) + if (_tailwindConfig) { + tailwindConfig = defuArrayFn(_tailwindConfig, tailwindConfig) + } } - tailwindConfig.content = [...(tailwindConfig.content || []), ...contentPaths] - - // Merge with our default purgecss default - tailwindConfig = defuArrayFn(tailwindConfig, moduleOptions.config) - // Write cjs version of config to support vscode extension const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r) const resolvedConfig = resolveConfig(tailwindConfig) diff --git a/test/configs.test.ts b/test/configs.test.ts index f29edbb1..ff224c26 100644 --- a/test/configs.test.ts +++ b/test/configs.test.ts @@ -1,6 +1,7 @@ import { describe, test, expect, vi } from 'vitest' import { mockedWarn } from 'consola' import { useTestContext } from '@nuxt/test-utils' +import destr from 'destr' import { setupNuxtTailwind } from './util' describe('tailwindcss module configs', async () => { @@ -17,7 +18,8 @@ describe('tailwindcss module configs', async () => { configPath: [ 'alt-tailwind.config.js', 'malformed-tailwind.config', - 'ts-tailwind.config' + 'ts-tailwind.config', + 'override-tailwind.config.js' ], cssPath: 'tailwind.css' }) @@ -42,4 +44,15 @@ describe('tailwindcss module configs', async () => { // set from ts-tailwind.config.ts expect(nuxt.vfs[vfsKey]).contains('"javascriptYellow": "#f1e05a"') }) + + test('content is overridden', () => { + const nuxt = useTestContext().nuxt + const vfsKey = Object.keys(nuxt.vfs).find(k => k.includes('tailwind.config.')) + // set from override-tailwind.config.ts + const contentFiles = destr(nuxt.vfs[vfsKey].replace(/^(module\.exports = )/, '')).content.files + expect(contentFiles.length).toBe(4) + expect(contentFiles[0]).toBe('ts-content/**/*.md') + expect(contentFiles[1]).toBe('./custom-theme/**/*.vue') + expect(contentFiles.slice(2).filter(c => c.endsWith('vue')).length).toBe(2) + }) }) diff --git a/test/fixture/basic/override-tailwind.config.js b/test/fixture/basic/override-tailwind.config.js new file mode 100644 index 00000000..d46ecbb2 --- /dev/null +++ b/test/fixture/basic/override-tailwind.config.js @@ -0,0 +1,14 @@ +export default { + content: contentDefaults => [ + contentDefaults[0], + './custom-theme/**/*.vue', + ...contentDefaults.filter(c => c.endsWith('vue')) + ], + theme: { + extend: { + colors: { + typescriptBlue: '#007acc' + } + } + } +} diff --git a/test/fixture/basic/ts-tailwind.config.ts b/test/fixture/basic/ts-tailwind.config.ts index 095bf3a2..01c91bd9 100644 --- a/test/fixture/basic/ts-tailwind.config.ts +++ b/test/fixture/basic/ts-tailwind.config.ts @@ -2,7 +2,7 @@ import { Config } from 'tailwindcss' export default { content: [ - 'content/**/*.md' + 'ts-content/**/*.md' ], theme: { extend: {