marketing-tailwind-config

The custom Tailwind config for the marketing properties on Heroku.

All classes are prefixed with tw- to avoid clashing with existing classes.

This configuration covers:

• colours
• gradients
• fonts and typography
• transitions
• lobotomized owl selectors for margin-top via the .tw-owl-mt- classes
• min-height via the .tw-min-h- classes

You can use the configuration in your PostCSS configuration. For example, in a standard Rails postcss.config.js file:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('tailwindcss')('node_modules/@heroku/marketing-tailwind-config'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
    }),
  ],
}