How to Add Custom Font, Break points and Colors in Tailwind 4.1

Adding Custom Fonts, Breakpoints, and Colors in Tailwind CSS 4.1

Tailwind CSS 4.1 introduces a new approach for customization, moving away from the traditional tailwind.config.js file and instead using the @theme directive directly in your CSS files. Here’s how you can add custom fonts, breakpoints, and colors in Tailwind 4.1:

---

Custom Fonts

1. Import or Define the Font:

   • For local fonts, use @font-face in your CSS:

css

1. • @font-face { font-family: "Oswald"; src: url("/fonts/Oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }

   • For Google Fonts, use @import at the very top of your CSS:

css

1. • @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

2. Register the Font with Tailwind:

   • Use the @theme directive to define your custom font:

css

1. • @theme { --font-roboto: "Roboto", sans-serif; }

   • You can now use font-[roboto] utility classes in your HTML1246.

---

Custom Colors

• Define custom colors inside the @theme block in your CSS:

css

• @theme { --color-primary: #FF5733; --color-secondary: #1E40AF; }

• These variables can be used with Tailwind’s color utilities, e.g., bg-[color-primary]6.

---

Custom Breakpoints

• Tailwind 4.1 allows you to define custom breakpoints with CSS custom properties in the @theme block:

css

• @theme { --screen-sm: 640px; --screen-md: 768px; --screen-lg: 1024px; --screen-xl: 1280px; --screen-2xl: 1536px; --screen-3xl: 1920px; /* Custom breakpoint */ }

• You can now use these breakpoints with responsive prefixes, e.g., 3xl:bg-red-50036.

---

Example: Complete styles.css Setup

css

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); @font-face { font-family: "Oswald"; src: url("/fonts/Oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; } @theme { --font-roboto: "Roboto", sans-serif; --font-oswald: "Oswald", sans-serif; --color-primary: #FF5733; --color-secondary: #1E40AF; --screen-sm: 640px; --screen-md: 768px; --screen-lg: 1024px; --screen-xl: 1280px; --screen-2xl: 1536px; --screen-3xl: 1920px; }

Now you can use classes like font-[roboto], bg-[color-primary], and responsive utilities like 3xl:text-lg in your HTML1236.

---

Key Differences from Previous Versions

FeatureTailwind 3.x and EarlierTailwind 4.1+ (Current)Configurationtailwind.config.js@theme in CSSCustom FontsfontFamily in config fileCSS custom property in @themeCustom Colorscolors in config fileCSS custom property in @themeBreakpointsscreens in config fileCSS custom property in @theme

---

Summary:
To add custom fonts, colors, and breakpoints in Tailwind 4.1, use the @theme directive in your CSS files, defining custom properties for each. This replaces the old tailwind.config.js approach