{"id":13746839,"url":"https://github.com/semencov/tailwindcss-font-inter","last_synced_at":"2025-04-09T20:10:12.936Z","repository":{"id":43956132,"uuid":"210145353","full_name":"semencov/tailwindcss-font-inter","owner":"semencov","description":"TailwindCSS Plugin to integrate with Inter Typeface","archived":false,"fork":false,"pushed_at":"2025-02-01T12:09:54.000Z","size":178,"stargazers_count":82,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T20:10:06.549Z","etag":null,"topics":["css","dynamic-metrics","font-features","font-size","inter-typeface","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/semencov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-09-22T12:41:22.000Z","updated_at":"2025-03-14T04:21:14.000Z","dependencies_parsed_at":"2024-01-13T01:40:06.991Z","dependency_job_id":"3eebf825-6222-442a-9cd8-79f97d75f9b9","html_url":"https://github.com/semencov/tailwindcss-font-inter","commit_stats":{"total_commits":99,"total_committers":5,"mean_commits":19.8,"dds":"0.14141414141414144","last_synced_commit":"6991e2aee3191c810db7ac9b4fe879adefa5f581"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semencov%2Ftailwindcss-font-inter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semencov%2Ftailwindcss-font-inter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semencov%2Ftailwindcss-font-inter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semencov%2Ftailwindcss-font-inter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semencov","download_url":"https://codeload.github.com/semencov/tailwindcss-font-inter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103871,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dynamic-metrics","font-features","font-size","inter-typeface","tailwindcss","tailwindcss-plugin"],"created_at":"2024-08-03T06:01:02.688Z","updated_at":"2025-04-09T20:10:12.899Z","avatar_url":"https://github.com/semencov.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Tailwind Inter Plugin\n\nA TailwindCSS plugin that seamlessly integrates the beautiful Inter typeface by Rasmus Andersson ([@rsms](https://twitter.com/rsms)) into your projects. This plugin provides a complete solution for using Inter font with proper metrics and advanced OpenType features.\n\n## Features\n\n- 🎯 Adds `.font-inter` utility class for easy font family application\n- ⚙️ Configurable OpenType feature settings (ligatures, numerics, case features, etc.)\n- 🔄 Automatic `@font-face` injection from [Inter's CDN](https://rsms.me/inter/inter.css)\n- 🎨 Works seamlessly with Tailwind's fontSize configuration\n- 🚀 Zero configuration required to get started\n\n## Installation\n\n```sh\n# with npm\nnpm install --save-dev tailwindcss-font-inter\n\n# or with yarn\nyarn add -D tailwindcss-font-inter\n```\n\n## Quick Start\n\nAdd the plugin to your `tailwind.config.js`:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {},\n  plugins: [require('tailwindcss-font-inter')]\n}\n```\n\nNow you can put `.font-inter` class to apply the font (by default `@font-face` definitions will be added to your CSS).\n\n```html\n\u003cbody class=\"font-inter font-feature-default antialiased\"\u003e\n  \u003ch1 class=\"text-4xl font-bold\"\u003eBeautiful Typography\u003c/h1\u003e\n  \u003cp class=\"text-base\"\u003eYour content with the full power of the Inter font features.\u003c/p\u003e\n\u003c/body\u003e\n```\n\n## Configuration\n\n### Plugin Options\n\nCustomize the plugin behavior with these options:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require('tailwindcss-font-inter')({\n      importFontFace: true, // Set to false if you want to import Inter from elsewhere\n    })\n  ]\n}\n```\n\n### Font Features\n\nDefine custom sets of OpenType features:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      interFontFeatures: {\n        numeric: ['tnum', 'salt', 'ss02'], // Tabular numbers with stylistic alternates\n        case: ['case'],                     // Case-sensitive forms\n        fractions: ['frac'],                // Enable fractions\n        'stylistic-one': ['ss01']          // Stylistic Set 1\n      }\n    }\n  },\n  plugins: [require('tailwindcss-font-inter')]\n}\n```\n\nThis generates utility classes like:\n\n```css\n/* Default features */\n.font-feature-default { font-feature-settings: 'calt' 1, 'kern' 1; }\n.font-feature-normal { font-feature-settings: normal; }\n\n/* Custom features */\n.font-feature-numeric { font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1; }\n.font-feature-case { font-feature-settings: 'case' 1; }\n.font-feature-fractions { font-feature-settings: 'frac' 1; }\n.font-feature-stylistic-one { font-feature-settings: 'ss01' 1; }\n```\n\n## Manual Font Import\n\nIf you set `importFontFace: false`, you'll need to import Inter yourself. You can use Google Fonts:\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700\u0026display=swap\" rel=\"stylesheet\"\u003e\n```\n\nOr import directly from Inter's CDN:\n\n```css\n@import url('https://rsms.me/inter/inter.css');\n```\n\n## Browser Support\n\nInter works in all modern browsers. The font-feature-settings are supported in:\n- Chrome 48+\n- Firefox 34+\n- Safari 9.1+\n- Edge 15+\n\n## Credits\n\nThis plugin is inspired by [tailwind-plugin-inter-font](https://github.com/imsus/tailwind-plugin-font-inter) by Imam Susanto ([@imsus](https://github.com/imsus)).\n\n## License\n\n[MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemencov%2Ftailwindcss-font-inter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsemencov%2Ftailwindcss-font-inter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemencov%2Ftailwindcss-font-inter/lists"}