feat: exposeConfig to reference resolved config in javascript runtime (#69)

* feat: exposeConfig to access resolved config in runtime

fixes #62

* chore: update docs

* chore: update docs

* chore: improve module comments

* perf: force chunk creation for long term caching

* chore: import config in example index page

* chore: update docs

* chore: fix test

Author: pi0

README.md

@@ -55,7 +55,8 @@ If you want to set a different path for the configuration file or css file, you
   tailwindcss: {
     configPath: '~/config/tailwind.config.js',
     cssPath: '~/assets/css/tailwind.css',
-    purgeCSSInDev: false
+    purgeCSSInDev: false,
+    exposeConfig: false
   }
 }
 ```
@@ -83,6 +84,33 @@ You can also use CSS comments to tell purgeCSS to ignore some blocks:
 /* purgecss end ignore */
 ```
 
+## Referencing in JavaScript
+
+It can often be useful to reference tailwind configuration values in runtime. For example to access some of your theme values when dynamically applying inline styles in a component.
+
+If you need resolved tailwind config in runtime, you can enable `exposeConfig` option in `nuxt.config`:
+
+```js
+// nuxt.config.js
+{
+  tailwindcss: {
+    exposeConfig: true
+  },
+}
+```
+
+Then import where needed from `~tailwind.config`:
+
+```js
+// Import fully resolved config
+import tailwindConfig from '~tailwind.config'
+
+ // Import only part which is required to allow tree-shaking
+import { theme } from '~tailwind.config'
+```
+
+**NOTE:** Please be aware this adds **~19.5KB (~3.5KB)** to the client bundle size.
+
 ## Development
 
 1. Clone this repository

example/nuxt.config.js

@@ -5,6 +5,6 @@ module.exports = {
   buildDir: resolve(__dirname, '.nuxt'),
   srcDir: __dirname,
   modules: [
-    { handler: require('../') }
+    [require('../'), { exposeConfig: true }]
   ]
 }

example/pages/index.vue

@@ -8,6 +8,14 @@
   </div>
 </template>
 
+<script>
+import tailwindConfig from '~tailwind.config'
+
+global.tailwindConfig = tailwindConfig
+
+export default {}
+</script>
+
 <style scoped>
 .banner {
   @apply bg-indigo-900 text-center py-4;

lib/module.js

@@ -1,11 +1,12 @@
-const { join } = require('path')
+const { join, resolve } = require('path')
 const { ensureTemplateFile } = require('./utils')
 
 module.exports = async function (moduleOptions) {
   const options = {
     configPath: 'tailwind.config.js',
     cssPath: join(this.options.dir.assets, 'css', 'tailwind.css'),
     purgeCSSInDev: false,
+    exposeConfig: false,
     ...this.options.tailwindcss,
     ...moduleOptions
   }
@@ -55,6 +56,37 @@ module.exports = async function (moduleOptions) {
       }
       await this.requireModule(['nuxt-purgecss', purgeCSS])
     }
+
+    /*
+    ** Expose resolved tailwind config as an alias
+    ** https://tailwindcss.com/docs/configuration/#referencing-in-javascript
+    */
+    if (options.exposeConfig) {
+      // Resolve config
+      const tailwindConfig = require(configPath)
+      const resolveConfig = require('tailwindcss/resolveConfig')
+      const resolvedConfig = resolveConfig(tailwindConfig)
+
+      // Render as a json file in buildDir
+      this.addTemplate({
+        src: resolve(__dirname, 'templates/tailwind.config.json'),
+        fileName: 'tailwind.config.json',
+        options: { config: resolvedConfig }
+      })
+
+      // Alias to ~tailwind.config
+      this.options.alias['~tailwind.config'] =
+        resolve(this.options.buildDir, 'tailwind.config.json')
+
+      // Force chunk creation for long term caching
+      const { cacheGroups } = this.options.build.optimization.splitChunks
+      cacheGroups.tailwindConfig = {
+        test: /tailwind\.config/,
+        chunks: 'all',
+        priority: 10,
+        name: true
+      }
+    }
   })
 }
 

lib/templates/tailwind.config.json

@@ -0,0 +1 @@
+<%= JSON.stringify(options.config, null, 2) %>