@heroku/marketing-tailwind-config

The Tailwind config for Heroku marketing

Usage no npm install needed!

<script type="module">
  import herokuMarketingTailwindConfig from 'https://cdn.skypack.dev/@heroku/marketing-tailwind-config';
</script>

README

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,
    }),
  ],
}