Felix App Tailwind Design System

A TailwindCSS preset for our base styles and design tokens at Felix

Usage

If you don't already have a tailwind.config.js file in your project root, generate one with npx tailwindcss init

Run npm i @felix-health/felix-app-tailwind-design-system to install the preset in your project

Then add the preset to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  presets: [require('@felix-health/felix-app-tailwind-design-system')],
};

This preset runs the tailwind config in JIT mode. This means that you must make sure to configure your content option in your tailwind.config.js file with all of your template files so that JIT mode can know which files to scan:

module.exports = {
  // These paths are just examples, customize them to match your project structure
  content: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
  // ...
  presets: [require('@felix-health/felix-app-tailwind-design-system')],
};

We also add the prefix of fx- to every class via the prefix key by default.

You can continue to add other configurations in your tailwind.config.js file for things like important, etc...

Tailwind Viewer

If you want a visual representation of what classes the preset by itself generates, we use tailwind-config-viewer.

The tailwind config viewer is available at: https://tailwind-config-viewer.felixforus.ca

To run locally, run npm install and then npm run tailwind-config-viewer from the root of the project. This uses the tailwind.config.js file to generate the styles from the preset.

Publishing a new version

• Ensure you bump the package version in package.json
• Merge your changes into the master branch
• Follow the steps here to create a new release. On publish, a github action will push the release to npm

Note*

To consume your changes in the vue-components repository: npm install @felix-health/felix-app-tailwind-design-system@latest

Other notes

Learn more about TailwindCSS presets here: https://tailwindcss.com/docs/presets