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) %>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/tailwindcss",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "TailwindCSS module for Nuxt.js",
   "license": "MIT",
   "contributors": [
@@ -29,27 +29,27 @@
     "tailwindcss": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/core": "^7.8.7",
+    "@babel/preset-env": "^7.8.7",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@nuxtjs/eslint-config": "^2.0.2",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^25.1.0",
     "codecov": "^3.6.5",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jest": "^23.7.0",
+    "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-promise": "latest",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.1",
+    "eslint-plugin-vue": "^6.2.2",
     "get-port": "^5.1.1",
     "husky": "^4.2.3",
     "jest": "^25.1.0",
     "nuxt": "^2.11.0",
-    "request": "latest",
+    "request": "^2.88.2",
     "request-promise-native": "^1.0.8",
     "standard-version": "^7.1.0"
   }