Zephyr Tailwind

Reusable TailwindCSS Config for All Things Zephyr

Installation

1. Run yarn add tailwindcss (if you get peer dep errors, explicitly append the version @^1.8.10)
2. Run yarn add @kienleholdings/zephyr-tailwind

Setup

1. Create a file named tailwind.config.js
2. Add the following

const zephyrTailwind = require('@kienleholdings/zephyr-tailwind');

module.exports = {
  ...zephyrTailwind.default,
};

From there, we recommend taking a look at the TailwindCSS Documentation, as they go into a lot more depth about different CSS preprocessors and bundlers than we'd like to. Our preferred method is to use PostCSS with Webpack, but really anything works if you put your mind to it!

Usage with PostCSS

Configuring PostCSS

1. Create a file named postcss.config.js
2. Add the following

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.config.js'), require('autoprefixer')],
};

Creating the Style Sheet

1. Create a file somewhere in your application's source code named zephyr.css
2. Add the following

body {
  max-width: 100vw;
  overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@700&family=Source+Sans+Pro:wght@400;700&display=swap');

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

All you need to do from there is add import ./zephyr.css to your application root and you're good to go!

Customization

By default Zephyr makes it easy to customize colors. Simply call the config function with a color object. Here's an example:

const zephyrTailwind = require('@kienleholdings/zephyr-tailwind');

const newColors = {
  ...zephyrTailwind.defaultColors,
  primary: {
    lighter: '#FFA726',
    normal: '#FF9800',
    darker: '#FB8C00',
  },
};

module.exports = zephyrTailwind.generateConfig(newColors);

For more in-depth tailwind customization, you can pass a TailwindCSS configuration object as a second parameter

const zephyrTailwind = require('@kienleholdings/zephyr-tailwind');

// Put your color overrides here or set "newColors" below to undefined
// (i.e. zephyrTailwind.generateConfig(undefined, {});

const additionalConfiguration = {
  // Put your Twilwind customizations here
};

module.exports = zephyrTailwind.generateConfig(newColors, additionalConfiguration);