tailwindcss official website Customization: plug-ins, presets (presets, combined configuration)

Keywords: Javascript html css

tailwindcss official website (8) Customization: plug-ins, presets (presets, combined configuration)

Official website: Installation - Tailwind CSS Chinese document

  • Tailwind is a framework for building customized user interfaces, so customization is considered from the beginning of design.
  • !important
    • This property allows the browser to preferably execute this statement, plus! Importan RT can override the style of the parent

1. Plug in

Extend Tailwind with reusable third-party plug-ins.

summary

The plug-in allows you to register new styles and let Tailwind use JavaScript instead of CSS to inject users' style sheets.

To start your first plug-in, first import the plugin function of Tailwind from tailwindcss/plugin. Then you call this function in your plugins array, using an anonymous function as its first parameter.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, prefix, config }) {
      // Add your custom styles here
    }),
  ]
}

The plug-in function receives a single object parameter and can destructured Into several help functions.

  • addUtilities(), for registering new utility styles
  • addComponents(), for registering new component styles
  • addBase(), for registering new base styles
  • addVariant(), for registering custom variants
  • e(), for escaping strings meant to be used in class names
  • prefix(), for manually applying the user's configured prefix to parts of a selector
  • theme(), for looking up values in the user's theme configuration
  • variants(), for looking up values in the user's variants configuration
  • config(), for looking up values in the user's Tailwind configuration
  • postcss, for doing low-level manipulation with PostCSS directly

Add feature class

The addUtilities function allows you to register new styles in the utilities layer of Tailwind.

The output order of plug-in function classes is in the order of their registration, after the built-in function classes. Therefore, if the function target of a plug-in is any attribute the same as the built-in function class, the plug-in function class will take precedence.

To add a new function class from the plug-in, call addUtilities and use CSS in JS syntax Pass your style.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
        '.skew-15deg': {
          transform: 'skewY(-15deg)',
        },
      }

      addUtilities(newUtilities)
    })
  ]
}

Prefix and important reference

By default, the plug-in function class will automatically comply with the user's requirements prefix and important preference.

That is, if such Tailwind configuration is given:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}

... the above example plug-in will generate the following CSS:

.tw-skew-10deg {
  transform: skewY(-10deg) !important;
}
.tw-skew-15deg {
  transform: skewY(-15deg) !important;
}

If necessary, you can choose not to use this behavior by passing an option object as the second parameter to addUtilities.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, {
        respectPrefix: false,
        respectImportant: false,
      })
    })
  ]
}

variant

To generate a response, hover, focus, active, or other variant of a style, use the variants option to specify which variant you want to generate.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, {
        variants: ['responsive', 'hover'],
      })
    })
  ]
}

If you only need to specify variants without choosing not to use the default prefix or important option, you can also directly pass the variant array as the second parameter.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

If you want users to provide their own variants in the variants section of their tailwind.config.js file, you can use the variants() function to get their configured variants.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: {
    customPlugin: ['responsive', 'hover'],
  },
  plugins: [
    plugin(function({ addUtilities, variants }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, variants('customPlugin'))
    })
  ]
}

Add components

The addComponents function allows you to register new styles in the components layer of Tailwind.

Use it to add more personalized and complex classes, such as buttons, form controls, warnings, etc; This is the kind of pre built component you often see in other frameworks that you may need to override with function classes.

To add a new component style from the plug-in, call addComponents, using CSS in JS syntax Pass your style.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#2779bd'
          },
        },
        '.btn-red': {
          backgroundColor: '#e3342f',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a'
          },
        },
      }

      addComponents(buttons)
    })
  ]
}

Prefix and important reference

By default, component classes automatically comply with the user's prefix preferences, but are not affected by the user's important preferences.

This means that if you have the following Tailwind configuration:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}

... the above example plug-in will generate the following CSS:

.tw-btn {
  padding: .5rem 1rem;
  border-radius: .25rem;
  font-weight: 600;
}
.tw-btn-blue {
  background-color: #3490dc;
  color: #fff;
}
.tw-btn-blue:hover {
  background-color: #2779bd;
}
.tw-btn-blue {
  background-color: #e3342f;
  color: #fff;
}
.tw-btn-blue:hover {
  background-color: #cc1f1a;
}

Although there is rarely a good reason for components to declare important, if you really need to do so, you can add it manually! important . 

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem !important',
          borderRadius: '.25rem !important',
          fontWeight: '600 !important',
        },
        // ...
      }

      addComponents(buttons)
    })
  ]
}

All classes in the selector will be prefixed by default, so if you add a more complex style, such as:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents }) {
      const components = {
        // ...
        '.navbar-inverse a.nav-link': {
            color: '#fff',
        }
      }

      addComponents(components)
    })
  ]
}

... will generate the following CSS:

.tw-navbar-inverse a.tw-nav-link {
    color: #fff;
}

To choose not to use a prefix, you can pass an options object as the second parameter to addComponents:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents }) {
      const components = {
        // ...
      }

      addComponents(components, {
        respectPrefix: false
      })
    })
  ]
}

variant

To generate a responsive, hover, focus, active, or other variant of a component, use the variants option to specify the variant you want to generate.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const newComponents = {
        // ...
      }

      addComponents(newComponents, {
        variants: ['responsive', 'hover'],
      })
    })
  ]
}

If you only need to specify variants without choosing not to use the default prefix or important option, you can also directly pass the variant array as the second parameter.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const newComponents = {
        // ...
      }

      addComponents(newComponents, ['responsive', 'hover'])
    })
  ]
}

If you want users to provide their own variants in the variants section of their tailwind.config.js file, you can use the variants() function to get their configured variants.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: {
    customPlugin: ['responsive', 'hover'],
  },
  plugins: [
    plugin(function({ addComponents, variants }) {
      const newComponents = {
        // ...
      }

      addComponents(newComponents, variants('customPlugin'))
    })
  ]
}

Add base style

The addBase function allows you to register new styles in the base layer of Tailwind.

Use it to add such as basic layout styles, personalized global resets, or @ font face rules.

To add a new base style from the plug-in, call addBase and use CSS in JS syntax Pass your style.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, config }) {
      addBase({
        'h1': { fontSize: config('theme.fontSize.2xl') },
        'h2': { fontSize: config('theme.fontSize.xl') },
        'h3': { fontSize: config('theme.fontSize.lg') },
      })
    })
  ]
}

Because the basic styles are for raw selectors such as div and h1, they do not comply with the user's prefix or important configuration.

Escape class name

If the class generated by your plug-in contains user supplied strings, you can use the e function to escape these class names to ensure that non-standard characters are processed correctly and automatically.

For example, the plug-in generates a set of. rotate-{angle} function classes, where {angle} is a user supplied string. The e function is used to escape the class name of the connection to ensure that classes such as. rotate-1/4 work as expected.

// tailwind.config.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    rotate: {
      '1/4': '90deg',
      '1/2': '180deg',
      '3/4': '270deg',
    }
  },
  plugins: [
    plugin(function({ addUtilities, config, e }) {
      const rotateUtilities = _.map(config('theme.rotate'), (value, key) => {
        return {
          [`.${e(`rotate-${key}`)}`]: {
            transform: `rotate(${value})`
          }
        }
      })

      addUtilities(rotateUtilities)
    })
  ]
}

This plug-in will generate the following CSS:

.rotate-1\/4 {
  transform: rotate(90deg);
}
.rotate-1\/2 {
  transform: rotate(180deg);
}
.rotate-3\/4 {
  transform: rotate(270deg);
}

Note that only the content you really want to escape is escaped; Do not pass the leading. In the class name or at the beginning of pseudo classes such as: hover or: focus, otherwise these characters will be escaped.

In addition, because CSS has rules on class names (class names cannot start with numbers, but can contain numbers), it is best to escape the complete class name (not just the user provided part), otherwise you may get unnecessary escape sequences.

// Will unnecessarily escape `1`
`.rotate-${e('1/4')}`
// => '.rotate-\31 \/4'

// Won't escape `1` because it's not the first character
`.${e('rotate-1/4')}`
// => '.rotate-1\/4'

Manually prefix selectors

If you are writing something complicated and you only want to prefix some classes, you can use the prefix function to finely control when the user configured prefix is applied.

For example, if you are creating a plug-in for reuse in a set of internal projects, including existing classes in its selector, you may just want to prefix the new classes.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents, prefix }) {
      addComponents({
        [`.existing-class > ${prefix('.new-class')}`]: {
          backgroundColor: '#fff',
        }
      })
    })
  ]
}

This will generate the following CSS:

.existing-class > .tw-new-class {
  background-color: #fff;
}

The prefix function prefixes all classes in the selector and ignores selectors that are not classes, so it is completely safe to pass a complex selector like this.

prefix('.btn-blue .w-1\/4 > h1.text-xl + a .bar')
// => '.tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar'

Reference user configuration

The config, theme, and variants functions allow you to use dot notation to get a value from the user's Tailwind configuration and provide a default value if the path does not exist.

For example, this simplified version of the built-in container The plug-in uses the theme function to get user configured breakpoints.

// tailwind.config.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents, theme }) {
      const screens = theme('screens', {})

      const mediaQueries = _.map(screens, width => {
        return {
          [`@media (min-width: ${width})`]: {
            '.container': {
              'max-width': width,
            },
          },
        }
      })

      addComponents([
        { '.container': { width: '100%' } },
        ...mediaQueries,
      ])
    })
  ]
}

Note that the theme function is actually just a shortcut to the topic section of the user configuration using the config function.

// These are equivalent
config('theme.screens')
theme('screens')

If you want to refer to the user's variants configuration, it is recommended that you use the variants() function instead of the config function.

Do not use the config function to find variations

addUtilities(newUtilities, config('variants.customPlugin'))

Use the variants function instead

addUtilities(newUtilities, variants('customPlugin'))

Because variants can simply become a global variation list and configure each plug-in in the whole project, using the variants() function can make it easy for you to follow the user's configuration rather than re implement the logic yourself.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: ['responsive', 'hover', 'focus'],
  plugins: [
    plugin(function ({ config, variants }) {
      config('variants.customPlugin')
      // => undefined

      variants('customPlugin')
      // => ['reponsive', 'hover', 'focus']
    })
  ]
}

Exposure options

In general, it makes sense for a plug-in to expose its options. Users can configure these options to customize the behavior of the plug-in.

The best way is to define your own keys in the user's theme and variants configuration and ask them to provide any options there so that you can access them through the theme and variants functions.

For example, there is a plug-in * (extracted into its own module) * to create a simple gradient function class and accept the gradient value and variation to be generated as options.

// ./plugins/gradients.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities, e, theme, variants }) {
  const gradients = theme('gradients', {})
  const gradientVariants = variants('gradients', [])

  const utilities = _.map(gradients, ([start, end], name) => ({
    [`.${e(`bg-gradient-${name}`)}`]: {
      backgroundImage: `linear-gradient(to right, ${start}, ${end})`
    }
  }))

  addUtilities(utilities, gradientVariants)
})

To use it, you need to require it in your plug-in list and specify your configuration under the gradients key in theme and variants.

// tailwind.config.js
module.exports = {
  theme: {
    gradients: theme => ({
      'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
      'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
      // ...
    })
  },
  variants: {
    gradients: ['responsive', 'hover'],
  },
  plugins: [
    require('./plugins/gradients')
  ],
}

Provide default options

To provide the default theme and variants options for your plug-in, pass the second parameter containing the default value to the plugin function of Tailwind,.

// ./plugins/gradients.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities, e, theme, variants }) {
  // ...
}, {
  theme: {
    gradients: theme => ({
      'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
      'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
      // ...
    })
  },
  variants: {
    gradients: ['responsive', 'hover'],
  }
})

This object is just another Tailwind configuration object And has all the same properties and functions as the configuration object used in tailwind.config.js.

By providing your default values in this way, end users will be able to cover and extend Your default values, just as they can override and extend Tailwind's built-in styles.

CSS in JS syntax

Each addUtilities, addComponents, and addBase expects CSS rules to be written as JavaScript objects. Tailwind uses syntax that you may recognize from CSS in JS libraries, such as Emotion , and by postcss-js Provide support.

Consider this simple CSS rule:

.card {
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

Translate it into CSS in JS objects, like this:

addComponents({
  '.card': {
    'background-color': '#fff',
    'border-radius': '.25rem',
    'box-shadow': '0 2px 4px rgba(0,0,0,0.2)',
  }
})

For convenience, the attribute name can also be written in camelCase and will be automatically translated into dash case:

addComponents({
  '.card': {
    backgroundColor: '#fff',
    borderRadius: '.25rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
  }
})

Nesting is also supported (by postcss-nested Provide support), using the same syntax as Sass or Less that you may be familiar with.

addComponents({
  '.card': {
    backgroundColor: '#fff',
    borderRadius: '.25rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
    '&:hover': {
      boxShadow: '0 10px 15px rgba(0,0,0,0.2)',
    },
    '@media (min-width: 500px)': {
      borderRadius: '.5rem',
    }
  }
})

Multiple rules can be defined in the same object:

addComponents({
  '.btn': {
    padding: '.5rem 1rem',
    borderRadius: '.25rem',
    fontWeight: '600',
  },
  '.btn-blue': {
    backgroundColor: '#3490dc',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#2779bd'
    },
  },
  '.btn-red': {
    backgroundColor: '#e3342f',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#cc1f1a'
    },
  },
})

... or as an array of objects in case you need to reuse the same key:

addComponents([
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
])

Adding variants

Add variant

The addVariant function allows you to register your own custom variant , these variants can be used like the built-in hover, hover, hover and other variants.

To add a new variable, call the addVariant function, pass in the name of your custom variable, and a callback to modify the affected CSS rules as needed.

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('disabled', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`disabled${separator}${className}`)}:disabled`
        })
      })
    })
  ]
}

The object received by the callback can be deconstructed into the following parts:

  • modifySelectors, a helper function to simplify adding basic variants
  • separator, the user's configured separator string
  • container, a PostCSS Container containing all of the rules the variant is being applied to, for creating complex variants

Basic variants

Basic variant

If you want to add a simple variable, just change the selector and use the modify selectors assistant.

The modifySelectors assistant accepts a function that receives an object that can be refactored into the following parts:

  • selector, the complete unmodified selector for the current rule
  • className, the class name of the current rule with the leading dot removed

The function you pass to modifySelectors should simply return the modified selector.

For example, a variant plug-in of first child can be written as follows:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('first-child', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`first-child${separator}${className}`)}:first-child`
        })
      })
    })
  ]
}

Complex variant

If you need to do more than simply modify the selector (such as changing the actual rule declaration or wrapping the rule in another at rule), you will need to use the container instance.

Using the container instance, you can traverse all the rules in a given module or @ variants block and manipulate them at will using the standard PostCSS API.

For example, the plug-in creates an important version for each affected function by adding an exclamation point before the class and modifying each declaration to important.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('important', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.\\!${rule.selector.slice(1)}`
          rule.walkDecls(decl => {
            decl.important = true
          })
        })
      })
    })
  ]
}

This plug-in wraps all the rules in the container with @ supports (display: grid) at rule, and adds supports grid before each rule.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e, postcss }) {
      addVariant('supports-grid', ({ container, separator }) => {
        const supportsRule = postcss.atRule({ name: 'supports', params: '(display: grid)' })
        supportsRule.append(container.nodes)
        container.append(supportsRule)
        supportsRule.walkRules(rule => {
          rule.selector = `.${e(`supports-grid${separator}${rule.selector.slice(1)}`)}`
        })
      })
    })
  ]
}

To learn more about using PostCSS directly, see PostCSS API documentation.

Using custom variants

Use custom variants

Using custom variants is no different from using Tailwind's built-in variants.

To use custom variants with Tailwind's core plug-ins, add them to the variants section of your configuration file.

// tailwind.config.js
modules.exports = {
  variants: {
    borderWidths: ['responsive', 'hover', 'focus', 'first-child', 'disabled'],
  }
}

To use custom variants with custom feature classes in your own CSS, use variants at-rule. 

@variants hover, first-child {
  .bg-cover-image {
    background-image: url('/path/to/image.jpg');
  }
}

2. presets

Create your own reusable configuration presets.

By default, any configuration added in your tailwind.config.js file will be intelligently associated with Default configuration Merge your own configuration as a set of overrides and extensions.

The presets option allows you to specify a different configuration to use as your basic configuration, which makes it easy to package a set of configurations reused across projects.

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

This is very useful for teams that manage multiple Tailwind projects for the same brand. They want a single color, font and other common custom sources.

Create preset

The default is a regular Tailwind configuration object, which is the same as the configuration added in your tailwind.config.js file.

// Example preset
module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      flexGrow: {
        2: '2'
        3: '3'
      },
      zIndex: {
        60: '60'
        70: '70'
        80: '80'
        90: '90'
        100: '100'
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography')
    require('@tailwindcss/aspect-ratio')
  ],
}

As you can see, the preset can contain all the configuration options you are used to, including theme coverage and extension, adding plug-ins, configuring prefixes, and so on. read How to merge configurations Learn more.

Assuming this preset is saved in. / tailwind-preset.js, you can use it by adding it to the presets key in the tailwind.config.js file in your actual project:

// tailwind.config.js
module.exports = {
  presets: [
    require('./tailwind-preset.js')
  ],
  // Customizations specific to this project would go here
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active']
    },
  },
}

By default, the preset itself extends Tailwind's Default configuration , just like your own configuration. If you want to create a preset to completely replace the default configuration, include an empty preset key in the preset itself.

// Example preset
module.exports = {
  presets: [],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}

For more information, read Disable default configuration.

How to merge configurations

Project specific configurations (those found in your tailwind.config.js file) are merged with the default configuration in the same way as the default configuration.

The following options in tailwind.config.js simply replace the same options that exist in the preset:

  • purge
  • darkMode
  • prefix
  • important
  • variantOrder
  • separator

The remaining options are carefully combined in the most reasonable way of this option, which will be explained in detail below.

theme

The theme object is shallow merged, and the top-level key in tailwind.config.js replaces the same top-level key in any preset. The only exception is the extend key, which is collected in all configurations and applied to the rest of the topic configuration.

stay Topic configuration document Learn more about how the theme option works.

variant

The variants object, like the theme object, is a shallow merge, replacing the same top-level key in any preset with the top-level key. The only exception is the extend key, which, like theme, is collected in all configurations.

stay variants configuration document Learn more about how the variants option works.

Preset

Presets array is merged across configurations, allowing presets to import their own presets, and the imported presets can also import their own presets.

plug-in unit

The plugins array is merged in different configurations, enabling the preset to register plug-ins, and allowing you to add additional project level plug-ins.

This means that it is impossible to disable the plug-in added by a preset. If you find that you want to disable a plug-in in the preset, you may want to remove the plug-in from the preset and reference it project by project, or Split the preset into two.

Core plug-ins

The corePlugins option behaves differently depending on whether you configure it as an object or an array.

If you configure corePlugins as an object, it will be merged across configurations.

// ./example-preset.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

// tailwind.config.js
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This configuration will be merged
  corePlugins: {
    cursor: false
  }
}

If you configure corePlugins as an array, it will replace any corePlugins configuration provided by your configured preset.

// ./example-preset.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

// tailwind.config.js
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This will replace the configuration in the preset
  corePlugins: ['float', 'padding', 'margin']
}

Extend multiple presets

The presets option is an array that can accept multiple presets. This is useful if you want to split your reusable customization into composite blocks that can be imported independently.

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}

When adding multiple presets, it should be noted that if they overlap in any way, their resolution method is the same as that of your own customization and preset, and the final configuration wins.

For example, if both configurations provide a custom palette (and extend is not used), the configuration-b palette is used.

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

Disable default configuration

If you want to disable the default configuration completely and do not use any underlying configuration, set presets to an empty array.

// tailwind.config.js
module.exports = {
  presets: [],
  // ...
}

This will completely disable all Tailwind defaults, so colors, font families, font sizes, spacing values, and so on will not be generated at all.

If you want your preset to provide a complete design system instead of extending Tailwind's default values, you can also do so in the preset.

// ./example-preset.js
module.exports = {
  presets: [],
  // ...
}

// tailwind.config.js
module.exports = {
  presets: [
    require('./example-preset.js')
  ],
  // ...
}

Posted by Atanu on Mon, 20 Sep 2021 16:44:12 -0700

Hot Keywords

©2024 Programmer Group