Gathering detailed insights and metrics for tailwindcss-font-inter
Gathering detailed insights and metrics for tailwindcss-font-inter
TailwindCSS Plugin to integrate with Inter Typeface
Installations
npm install tailwindcss-font-interDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=18.0.0
Node Version
20.18.2
NPM Version
10.8.2
Releases
12
Languages
3
JavaScript
HTML
CSS
JavaScript (78.54%)
HTML (20.94%)
CSS (0.52%)
Developer
semencov
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
83 Stars
117 Commits
5 Forks
3 Watchers
6 Branches
3 Contributors
Updated on May 08, 2025
Maintainers
1
Package Meta Information
Latest Version
4.0.0
Package Id
tailwindcss-font-inter@4.0.0
Unpacked Size
14.49 kB
Size
4.76 kB
File Count
6
NPM Version
10.8.2
Node Version
20.18.2
Published on
Feb 01, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
4
Tailwind Inter Plugin
A TailwindCSS plugin that seamlessly integrates the beautiful Inter typeface by Rasmus Andersson (@rsms) into your projects. This plugin provides a complete solution for using Inter font with proper metrics and advanced OpenType features.
Features
- 🎯 Adds
.font-interutility class for easy font family application - ⚙️ Configurable OpenType feature settings (ligatures, numerics, case features, etc.)
- 🔄 Automatic
@font-faceinjection from Inter's CDN - 🎨 Works seamlessly with Tailwind's fontSize configuration
- 🚀 Zero configuration required to get started
Installation
1# with npm 2npm install --save-dev tailwindcss-font-inter 3 4# or with yarn 5yarn add -D tailwindcss-font-inter
Quick Start
Add the plugin to your tailwind.config.js:
1// tailwind.config.js 2module.exports = { 3 theme: {}, 4 plugins: [require('tailwindcss-font-inter')] 5}
Now you can put .font-inter class to apply the font (by default @font-face definitions will be added to your CSS).
1<body class="font-inter font-feature-default antialiased"> 2 <h1 class="text-4xl font-bold">Beautiful Typography</h1> 3 <p class="text-base">Your content with the full power of the Inter font features.</p> 4</body>
Configuration
Plugin Options
Customize the plugin behavior with these options:
1// tailwind.config.js 2module.exports = { 3 plugins: [ 4 require('tailwindcss-font-inter')({ 5 importFontFace: true, // Set to false if you want to import Inter from elsewhere 6 }) 7 ] 8}
Font Features
Define custom sets of OpenType features:
1// tailwind.config.js 2module.exports = { 3 theme: { 4 extend: { 5 interFontFeatures: { 6 numeric: ['tnum', 'salt', 'ss02'], // Tabular numbers with stylistic alternates 7 case: ['case'], // Case-sensitive forms 8 fractions: ['frac'], // Enable fractions 9 'stylistic-one': ['ss01'] // Stylistic Set 1 10 } 11 } 12 }, 13 plugins: [require('tailwindcss-font-inter')] 14}
This generates utility classes like:
1/* Default features */ 2.font-feature-default { font-feature-settings: 'calt' 1, 'kern' 1; } 3.font-feature-normal { font-feature-settings: normal; } 4 5/* Custom features */ 6.font-feature-numeric { font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1; } 7.font-feature-case { font-feature-settings: 'case' 1; } 8.font-feature-fractions { font-feature-settings: 'frac' 1; } 9.font-feature-stylistic-one { font-feature-settings: 'ss01' 1; }
Manual Font Import
If you set importFontFace: false, you'll need to import Inter yourself. You can use Google Fonts:
1<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
Or import directly from Inter's CDN:
1@import url('https://rsms.me/inter/inter.css');
Browser Support
Inter works in all modern browsers. The font-feature-settings are supported in:
- Chrome 48+
- Firefox 34+
- Safari 9.1+
- Edge 15+
Credits
This plugin is inspired by tailwind-plugin-inter-font by Imam Susanto (@imsus).
License
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 1/16 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/semencov/tailwindcss-font-inter/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/semencov/tailwindcss-font-inter/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/semencov/tailwindcss-font-inter/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/semencov/tailwindcss-font-inter/release.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/release.yml:42
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
Score
3.8
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More