Tailwind 4 variables and styles.
npm install kf-tailwindTailwind CSS styles for Kreftforeningen based on Tailwind 4.
- pnpm add kf-tailwind
- @import "kf-tailwind/index.css"; at the top of your main tailwind css file
Basic styling for semantic elements such as:
- Headings
- Blockquote
Colors in oklch. Main colors also in hex.
- KF Blue
- KF Green
- KF Orange
- KF Red
- KF Pink
- KF Purple
- Gray
- Black
- White
- Vipps
- IBM Plex Sans
- IBM Plex Condesed
- IBM Plex Serif
- Pulsating text
- Fade in / fade out
To extract all color variables from the CSS into JSON files, run:
``sh`
pnpm run build
This will generate:
- json/colors.json with all --kf-hex-color-* variablesjson/extended-colors.json
- with all --color-* variables from the @theme { ... }` block
This git is published as a package on https://www.npmjs.com/package/kf-tailwind