First, a big thank you for putting in the work to make a baseline-based font in HTML/CSS possible! This a good step forward to finally being able to work from the baseline and not two half-leadings aka line-height.
Unfortunately I don't get your plugin to run on my application. This is what I'm using:
Laravel Mix: v2.0
webpack: v.3
tailwindcss: 1.8.6
tailwind-baseline: 0.0.3
In my tailwindcss.config file I have:
(...)
fontFamily: {
SharpSerif: ['"SharpSerif", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'],
},
baseline: {
fonts: {
SharpSerif: {
descenderHeightScale: 0.136,
capHeight: 0.540,
},
},
},
(...)
and
plugins: [require("tailwind-baseline")],
This is what I'm getting by trying to run it:
Module build failed: TypeError: getProcessedPlugins is not a function
at [PROJECT PATH]/node_modules/tailwindcss/lib/processTailwindFeatures.js:65:83
at LazyResult.run ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:228:27)
at LazyResult.then ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:134:21)
at loadPostcssConfig.then.config ([PROJECT PATH]/node_modules/vue-loader/lib/style-compiler/index.js:62:10)
at <anonymous>
at runMicrotasksCallback (internal/process/next_tick.js:122:5)
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)
Module build failed: TypeError: lineHeight[leading].endsWith is not a function
at Object.keys.filter.leading ([PROJECT PATH]/node_modules/tailwind-baseline/dist/index.js:42:93)
at Array.filter (<anonymous>)
at [PROJECT PATH]/node_modules/tailwind-baseline/dist/index.js:42:54
at plugins.forEach.plugin ([PROJECT PATH]/node_modules/tailwindcss/lib/util/processPlugins.js:66:5)
at Array.forEach (<anonymous>)
at _default ([PROJECT PATH]/node_modules/tailwindcss/lib/util/processPlugins.js:60:11)
at [PROJECT PATH]/node_modules/tailwindcss/lib/processTailwindFeatures.js:54:54
at LazyResult.run ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:228:27)
at LazyResult.then ([PROJECT PATH]/node_modules/postcss/lib/lazy-result.js:134:21)
at Promise.resolve.then.then ([PROJECT PATH]/node_modules/postcss-loader/lib/index.js:145:8)
at <anonymous>
I hope you may have an idea what went wrong. Would love to use your plugin.
Thank you for any help!
First, a big thank you for putting in the work to make a baseline-based font in HTML/CSS possible! This a good step forward to finally being able to work from the baseline and not two half-leadings aka line-height.
Unfortunately I don't get your plugin to run on my application. This is what I'm using:
In my tailwindcss.config file I have:
and
This is what I'm getting by trying to run it:
I hope you may have an idea what went wrong. Would love to use your plugin.
Thank you for any help!