Importing in tailwind config elsewhere for variable access

[dolbex]

Hey, Loving TW so far!

I'm working on a Vue project and I would like to import the tailwind config so that I can access the colors property and pull out a value so I can have a central place for those variables.

This is probably a newbie question but what's the best way to import that default export and access those variables? The way I'm doing it it's bitching about dependencies. Thanks for the work and help!

[adamwathan]

Can you share what you're trying? I would be surprised if you couldn't just do this in a single file .vue component or wherever you need it:

<template>...</template>

<script>
const tailwindConfig = require('../../../tailwind.js') // Or wherever the file is

export default {
  data() {
    return { ... }
  }
}
</script>

[pxwee5]

Tried that, didn't work in NuxtJS. Did it work on Vue?

{ TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Object.<anonymous> (tailwind.js:59:0)
    at Object.132 (pages/blog/index.074335503b3555487949.js:835:30)
    at __webpack_require__ (webpack:/webpack/bootstrap 53dbd12170fd4aa674cf:25:0)
    at Object.131 (pages/blog/index.vue:13:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 53dbd12170fd4aa674cf:25:0)
    at Object.80 (pages/blog/index.074335503b3555487949.js:897:304)
    at __webpack_require__ (webpack:/webpack/bootstrap 53dbd12170fd4aa674cf:25:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) statusCode: 500, name: 'TypeError' }

Correct me if I'm wrong, I think module.export is a node feature. And ES6 require or import needs the export to be export default.

EDIT: Found this PR that shows how to get the default configurations. But does not say how to get our own configs.

[CalebKester]

@pxwee5 did you figure this out? I just got this with vuejs and I was able to do both const tailwindConfig = require('../../../tailwind.js') // Or wherever the file is or (the method I went with) import { backgroundColors } from "../../tailwind.js";

[Grsmto]

This issue happens because you are mixing import and module.export statement which is not supported by Webpack since v3.
I'm not sure how to fix that but I suppose that Tailwind should use ESM export instead of module.export.

[jeissler]

I'm running into this same issue and wondering if anyone has a fix/workaround? I started like @CalebKester and I'd really like to get this working w/ my own tailwind config. Thanks in advance!

[dolbex]

@jeissler - I'm pretty sure that what @adamwathan stated earlier works. I gave it a quick go again in a current project I have going and it worked. in my app.js file I have the following:

const tailwindConfig = require('../../../tailwind.js') // (in Laravel this points to the root which is where my tailwind configuration file is
console.log(tailwindConfig)

Then I get this in my console:

[jeissler]

@dolbex Thanks for your quick reply! I'm using the latest vue-cli for my project and I'm seeing exactly the same error as @pxwee5 when attempting to use require as shown. It seemed as if @CalebKester had the same behavior in vue (how I found this thread)?

"TypeError: Cannot assign to read only property 'exports' of object '#<Object>'"

I believe it is to do w/ @Grsmto's comment about mixing import/module.export. I can however get the default config to work using:

require('tailwindcss/defaultConfig')()

Any ideas are appreciated because I really need this to work!

[dolbex]

@jeissler - no problem - sorry I couldn't respond to this sooner. My guess is this has to do with the difference in webpack configurations. I'm certainly not a master at that stuff. Usually, I just mess around until I get what I want but I can tell you some of the environmental setup I am running on this current project where I did my test. Maybe that'll help (maybe I'm totally off base here)

For .babelrc I have the following config:

{
  "presets": [
      "babel-preset-env",
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }],
      "stage-2"
  ],
  "plugins": [
    "transform-object-rest-spread",
    "transform-vue-jsx",
    "transform-runtime", 
    "syntax-dynamic-import"
  ]
}

For my package.json I have the following babel devDependencies:

        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-plugin-transform-vue-jsx": "^3.7.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-stage-2": "^6.24.1",

Laravel Mix (this version at least) has a dependency of webpack "^3.11.0" and my yarn.lock shows it resolved to 3.12.0

Maybe that can highlight some differences between our two environments

[jeissler]

@dolbex I can't thank you enough for this. I was about to ask what version of webpack you where on! Since I'm using the cli v3 I had to hunt around the plugins to see the diffs in our config, but it turns out they're very similar—exception being my webpack is 4.25.1. Setting up a new cli project to try and narrow it down to my use of typescript + class based components I found the problem in my case was actually completely unrelated to any of that. I'm a noob to tailwind and in my tailwind.js I had Object.assign when it needed to be global.Object.assign. Fixed all those and the world is good again :) Thanks a bunch!

[Dobby89]

Does anyone know how you could insert the tailwind config variables into a SCSS file? Like, inject and parse the objects into the top of the main SCSS entry file before compilation so you can use them in your SCSS.

[dolbex]

@jeissler - no problem glad you got it sorted out.

@Dobby89 I don't know how that is possible either. @adamwathan - maybe you should shed some light?

[tlgreg]

@Dobby89 @dolbex
My first though was to create a tailwind plugin that generates an scss file from the tailwind config (should be possible), but it turns out node-sass can be used for this too.
Found this on SO: Injecting variables during SASS compilation with Node

[TheDiehard22]

I have this import: import { screens } from '@root/tailwind.config.js';. This works in major browsers, but in IE11 it breaks over es6 syntax.

Does anyone know how to fix this? I only want the screens object, not all the tailwind functions.

[kemalcany]

I am having an error like below when I try to import the Tailwind config in a Vue component using require.

"TypeError: Cannot assign to read only property 'exports' of object '#<Object>'"

After few checks, I've noticed that it is because of the custom plugins that are being added in the plugins section as follows:

require('./tailwind/bg-half')({colors}),

and the plugin itself (just a simple one to add background with two colors)

module.exports = function({colors}) {
  return function({ addUtilities, e }) {
    const utilities = Object.keys(colors).map(function(key1) {
      return Object.keys(colors).map(function(key2) {
        return {
          [`.bg-half-${e(key1)}-${e(key2)}`]: {
            background: `linear-gradient(90deg, ${colors[key1]} 50%, ${colors[key2]} 50%)`
          }
        }
      })
    })
    addUtilities(utilities)
  }
}

if I remove the plugin from the tailwind config, then requiring the tailwind config from Ve component works fine. require('@/styles/tailwind). If I keep the plugin then it gets the error.

Hoping this will help others.