A development helper for more easily translating between px, rem and em, and creating name/value pairs for your tailwind config.
The px/rem helper does not output any classes, but is instead a development utility.
The px/rem helper functions make it easier to create Tailwind config files, particularly when transposing values from design software like Figma, Zeplin or Adobe XD.
// tailwind.config.js
const { pxToRemPair } = require('@captaincss/captaincss/helpers');
module.exports = {
theme: {
fontSize: {
...pxToRemPair(12),
...pxToRemPair(14),
...pxToRemPair(16),
...pxToRemPair(18),
...pxToRemPair(22),
},
},
};
// which would result in
module.exports = {
theme: {
fontSize: {
'12': '0.75rem',
'14': '0.875rem',
'16': '1rem',
'18': '1.125rem',
'22': '1.375rem',
},
},
};By default, the helpers use a base font size of 16 to generate the sizes.
However, each helper method takes a second parameter, which allows you to change the base font size.
// tailwind.config.js
const { pxToRemPair } = require('@captaincss/captaincss/helpers');
module.exports = {
theme: {
fontSize: {
...pxToRemPair(12, 18), // { '12': '0.66666667rem' },
...pxToRemPair(14, 18), // { '14': '0.77777778rem' },
...pxToRemPair(16, 18), // { '16': '0.88888889rem' },
...pxToRemPair(18, 18), // { '18': '1rem' },
...pxToRemPair(22, 18), // { '22': '1.22222222rem' },
},
},
};It is likely you will only have one base font size, and so repeating it for each function call can be tedious.
Instead, it is best practice to move this to a helper function, which stores the base font size and uses it automatically for each call.
// tailwind.config.js
const { pxToRemPair: pxToRemPairHelper } = require('@captaincss/captaincss/helpers');
const baseFontSize = 18;
const pxToRemPair = (px) => {
return pxToRemPairHelper(px, baseFontSize);
};
module.exports = {
theme: {
fontSize: {
...pxToRemPair(12), // { '12': '0.66666667rem' },
...pxToRemPair(14), // { '14': '0.77777778rem' },
...pxToRemPair(16), // { '16': '0.88888889rem' },
...pxToRemPair(18), // { '18': '1rem' },
...pxToRemPair(22), // { '22': '1.22222222rem' },
},
},
};