A TailwindCSS preset for our base styles and design tokens at Felix
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
or yarn add @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 purge
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
purge: ['./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...
If you want a visual representation of what classes the preset by itself generates, we use tailwind-config-viewer.
run npm install
and then npm run tailwind-config-viewer
from the root of the project. This uses the sample tailwind.config.js
file to generate the styles from the preset.
Learn more about TailwindCSS presets here: https://tailwindcss.com/docs/presets