Make resolveConfig available in user land

[adamwathan]

Adds a new resolveConfig file to the project root that can be imported as tailwindcss/resolveConfig and used to get a fully merged version of your custom config file.

Useful when you want access to your design tokens in JS.

Usage is like this:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../../tailwind.config.js'

const config = resolveConfig(tailwindConfig)

Considered having it accept a path but didn't seem that useful. I expect most people needing this would create another file in their src directory or similar that sort of proxied to their Tailwind config so they could easily import the fully resolved config instead of having to actually resolve it using the function every time:

// src/tailwindConfig.js
import resolveConfig from 'tailwindcss/resolveConfig'
import config from '../../tailwind.config.js'

export default resolveConfig(tailwindConfig)

Closes #832.

[yantakus]

Thanks for this. Would be very useful to have it in the readme somewhere.

[tylerwiegand]

I love this feature but I am unable to use it outside of a laravel project. I'm sure it's something with my babel config or something, but I don't know enough about it to troubleshoot it anymore! My issue is detailed here (hope I'm not breaking a rule with a link to a different forum!) and other's have also had this issue.

[kjbrum]

This continues to be an issue for me when trying to use Tailwind with Storybook. See initial issue here: tailwindlabs/discuss#279.

Specifically, this is happening now when I try to import the tailwindcss/defaultTheme to extend it with Tailwind UI.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['New Font Name', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/ui'),
    ],
}

[estevanmaito]

@kjbrum Could you tell your Node version?

[kjbrum]

Node: v13.3.0
npm: 6.13.1

[estevanmaito]

Would it be possible for you to test with an older version, like 8.9.0? If not, create a minimum reproducible repo?

My bet is it has something to do with Tailwind being built with @babel/preset-env targets' being "8.9.0" and CI tests being run on 8.x, 10.x and 12.x

As you can see, v13 is not being tested. If you can do this test, we could trace more problems related to this or rule out this hypothesis.

[kjbrum]

@estevanmaito I haven't had a chance to test with an older version of Node, but I was able to fix the error by adding "sourceType": "unambiguous" to my .babelrc file.

[estevanmaito]

This explains the behavior of "sometimes works", with the default configuration of Babel:

Setting the correct sourceType can be important because having the wrong type can lead to cases where Babel would insert import statements into files that are meant to be CommonJS files. This can be particularly important in projects where compilation of node_modules dependencies is being performed, because inserting an import statements can cause Webpack and other tooling to see a file as an ES module, breaking what would otherwise be a functional CommonJS file.

https://babeljs.io/docs/en/options#sourcetype

[dsubo]

In case others are facing importing issues for resolveConfig when working with a codebase that compiles or uses es6 syntax.

I'm using this with webpack and babel
for babel I'm using babel/preset-env
with the following configs:

 require('@babel/preset-env').default,
                 {
                   forceAllTransforms: true,
                   useBuiltIns:        'entry',
                   corejs:             3,
                   modules:            false,
                   exclude:            ['transform-typeof-symbol']
                 }

Since my code bundles the code using es6 module import/export syntax and is not compatible with commonjs syntax e.g. module.exports = /* */, I had to change the way that I imported resolveConfig in my codebase.

import resolveConfig from 'tailwindcss/src/public/resolve-config'

tailwindcss/src/public/resolve-config.js

Line 4 in b5f5adf

export default function resolveConfig(...configs) {

Compare this with

import resolveConfig from 'tailwindcss/resolveConfig'

tailwindcss/resolveConfig.js

Line 2 in b5f5adf

module.exports = (resolveConfig.__esModule ? resolveConfig : { default: resolveConfig }).default