search

kiliman / tailwindui-crawler

tailwindui-crawler downloads the component HTML files locally
MIT License
763 stars 95 forks source link

Option for Inter font and fix for logos #4

Closed nawok closed 4 years ago

nawok commented 4 years ago

I added a USE_INTER=1 option to add Inter font to the sans font family to achieve the look identical to examples on tailwindui.com. This pull request also contains a fix that replaces relative URLs with absolute.

kiliman commented 4 years ago

Thanks for the PR. I'm actually working on a transformer pipeline, so it'll be easy to extend the process by simply creating an exported function. See #5.

You can either update your PR when it lands, or I'll add these as transformer functions.

kiliman commented 4 years ago

btw: here's how the useInter transformer would look like

const defaultFontFamily =
  '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"'
const interFont =
  '<link rel="stylesheet" href="https://rsms.me/inter/inter.css">'
const fontFamilySans = `
<style type="text/css">
html, .font-sans{font-family:"Inter var",${defaultFontFamily}}
.sm\\:font-sans{font-family:"Inter var",${defaultFontFamily}}
.md\\:font-sans{font-family:"Inter var",${defaultFontFamily}}
.lg\\:font-sans{font-family:"Inter var",${defaultFontFamily}}
.xl\\:font-sans{font-family:"Inter var",${defaultFontFamily}}
</style>
`

module.exports = function($) {
  $('head')
    .append(interFont)
    .append(fontFamilySans)
}
nawok commented 4 years ago

Sure, I’ll update it.

kiliman commented 4 years ago

I've pushed v2.0 with transformer support and includes the prefixSrc and useInter transformers.