Fower provides default config for different platform, the config is a plain JavaScript object, the structure of config is like this:

const config = {  unit: 'px',  prefix: '',  important: false,  theme: {    // theme config  },  plugins: [    // plugin config  ],}

Built-in default config:


The unit for the style like width, height, padding, margin... The default value of unit option is px, you can use rem, em, vh, etc.


The prefix for the generated css classname, default is empty string.


if important option is true, every css rule will attach !important postfix. Default value is false.


The theme option is where you define your design system like color palette, spacing, fonts, border radius, breakpoints.

const config = {  theme: {    breakpoints: {      //    },    colors: {      //    },    spacings: {      //    },    fontSizes: {      //    },    // other theme config...  },}

Learn more about the theme in the theme section.

Read Config#

Fower config is a plain JavaScript object, you can read it from @fower/core.

import { getConfig } from '@fower/core'
const config = getConfig()
console.log('config:', config)console.log('config.inline:', config.inline)console.log('config.theme:', config.theme)

Custom Config#

You can update Fower config use setConfig() Api from @fower/core.

import { setConfig } from '@fower/core'
setConfig({  unit: 'rem',})

By default, user config will deepmerge to default config. you can change configure strategy by second param, form example, use replace strategy to replace the whole default config:

import { setConfig } from '@fower/core'
setConfig(  {    unit: 'rem',  },  'replace',)

Supported strategy:

  • deepmerge, default strategy, it will deepmerge to default config.
  • merge, it will merge to default config, equal to Object.assign.
  • replace, it will replace current config.


Before you get or set config, you should import platform package at first.

import '@fower/react'import { getConfig, setConfig } from '@fower/core'