Tailwind Preset

Documentation of the tailwind-base preset based on Bedu's Design System. Learn how to use our own configurable preset in your TailwindCSS projects.

Installation#

To get started, install @exponentialeducation/tailwind-base via yarn:

# Yarn
yarn add @exponentialeducation/tailwind-base

How to use#

By default, any configuration you add in your own tailwind.config.js file is intelligently merged with the default configuration, with your own configuration acting as a set of overrides and extensions.

The presets option lets you specify a different configuration to use as your base, making it easy to package up a set of customizations that you’d like to reuse across projects.

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

This can be very useful for teams that manage multiple Tailwind projects for the same brand where they want a single source of truth for colors, fonts, and other common customizations.

Colors#

Extending#

If you want to add a missing spacing, shadows, borders, etc, you can define any configuration you add in your own tailwind.config.js file.

// tailwind.config.js
module.exports = {
  presets: [
    require('@exponentialeducation/tailwind-base').default,
  ],
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}