How to get default config of tailwind CSS 2

Question

Tailwind CSS 2.x

I want to get the default height values of the height config.

const defaultConfig = require('tailwindcss/defaultConfig');
const height = defaultConfig.theme.height;

But height is a function, as one can see in the source code:

// tailwindcss/stubs/defaultConfig.stub.js
module.exports = {
  // ...
  theme: {
    // ...
    height: (theme) => ({
      auto: 'auto',
      ...theme('spacing'),
      '1/2': '50%',
      '1/3': '33.333333%',
    }),
  },
};

I understand the code: a theme function is passed which then is called to get other config parts of the theme.

But I don't know what this function is and where to find it so I can import it in my config and pass it as this:

defaultConfig.theme.height(thisIsTheFunctionInQuestion)

Where can I find it?

Answer 1

In order to resolve any tailwind configuration object, use resolveConfig() helper method

import resolveConfig from 'tailwindcss/resolveConfig'
import defaultConfig from 'tailwindcss/defaultConfig'

const config = resolveConfig(defaultConfig)

console.log(config.theme.height) // will return object