Recently tailwind v2 was released introcucing preset, this packages provide preset used to fasten your tailwind developpment.
Install the package
yarn add --dev tw-utils
Open your tailwind.config.js
file and put presets of your choice
module.exports = {
/// Your Config
presets: [
require("tw-utils/font/inter"), // Line to add
],
/// Your Config
}
Utils | Import code | Result class |
---|---|---|
Inter font import | require('tw-utils/font/inter) |
font-inter |
Inter font import as sans attribute | require('tw-utils/font/inter/sans) |
font-sans |
Inter font import as display attribute | require('tw-utils/font/inter/display) |
font-display |
Inter font import as sans, fallback of macos fonts | require('tw-utils/font/inter/sans-fallback) |
font-sans |
Manrope font import | require('tw-utils/font/manrope) |
font-manrope |
Manrope font import as sans attribute | require('tw-utils/font/manrope/sans) |
font-sans |
Manrope font import as display attribute | require('tw-utils/font/manrope/display) |
font-display |
Manrope font import as sans, fallback of macos fonts | require('tw-utils/font/manrope/sans-fallback) |
font-sans |
Space Grotesk font import | require('tw-utils/font/space-grotesk) |
font-space-grotesk |
Space Grotesk font import as display attribute | require('tw-utils/font/space-grotesk/sans) |
font-sans |
Space Grotesk font import as display attribute | require('tw-utils/font/space-grotesk/display) |
font-display |
Space Grotesk font import as sans, fallback of macos fonts | require('tw-utils/font/space-grotesk/sans-fallback) |
font-sans |
Poppins font import | require('tw-utils/font/poppins) |
font-poppins |
Poppins font import as display attribute | require('tw-utils/font/poppins/sans) |
font-sans |
Poppins font import as display attribute | require('tw-utils/font/poppins/display) |
font-display |
Poppins font import as sans, fallback of macos fonts | require('tw-utils/font/poppins/sans-fallback) |
font-sans |
Full tailwind colors palette (full-palette pkg) |
require('tw-utils/colors/full) |
docs |