Tailwind CSS 37 🎨 Custom Breakpoints and Container Queries (@min-*, @max-*, @container)
Tailwind’s default breakpoints cover the common screen sizes, but they are not universal. A design system may need a 3xl breakpoint at 1920px for large monitors. A component library may need a xs breakpoint at 320px for small phones. And increasingly, components need to respond not to the viewport at all, but to the width of their own parent container. A card in a narrow sidebar and the same card in a wide main panel should look different, even on the same screen. Viewport breakpoints cannot express that distinction. Container queries can.
Tailwind v4 brings two capabilities that address these needs. Custom breakpoints are defined in CSS using the @theme directive with --breakpoint-* variables, replacing the tailwind.config.js screens configuration of v3 . Container queries are now built into the framework natively, without the @tailwindcss/container-queries plugin that v3 required . The syntax uses @container to mark a parent as a query container and @sm:, @md:, @lg: variants to style children based on the container’s width.
These two features solve different problems. Custom breakpoints extend or replace the global viewport scale. Container queries make components self-contained and reusable across any layout context, because they respond to their parent’s size rather than the browser window’s size . A card that stacks vertically in a 300px sidebar and spreads horizontally in a 600px panel is written once, with container variants, and it works in both places without any knowledge of the viewport.
This chapter covers three areas. First, why custom breakpoints and container queries exist — the limitations of the default viewport scale and the reusability problem that container queries solve. Second, how to define custom breakpoints — the @theme directive, the --breakpoint-* namespace, and the @min-* and @max-* variants for viewport-based ranges. Third, how to use container queries — the @container class, named containers, @max-* container variants, and the interaction between container breakpoints and the --container-* theme namespace. The chapter ends with a complete example session, a quick reference, best practices, common pitfalls, real-world examples, and diagrams showing container boundaries and breakpoint cascades.
Key point: Custom breakpoints extend the viewport scale and are defined in @theme with --breakpoint-*. Container queries let a component respond to its parent’s width instead of the viewport. They are declared with @container on the parent and @sm:, @md:, @lg: variants on the children. Container query breakpoints use their own --container-* namespace, and the values must be static — var(), calc(), and clamp() cannot be used in container queries because the browser cannot resolve them .
Why custom breakpoints and container queries exist
The default-scale limitation. Tailwind ships with five breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px). These cover the common range of devices, but they are a single, global scale. A design system that needs a breakpoint at 480px for large phones, or at 1920px for wide monitors, cannot express that need with the defaults. In v3, custom breakpoints required editing tailwind.config.js and adding to the theme.screens key. In v4, the configuration moves to CSS. The @theme directive accepts --breakpoint-* variables, and Tailwind generates the corresponding variants — sm:, md:, 3xl: — from those variables .
The viewport-query problem. Viewport breakpoints ask one question: how wide is the browser window? But a component’s layout constraints are often determined by its parent, not the viewport. A card rendered inside a 300px sidebar has 300px of available width, regardless of whether the browser window is 1200px wide. With viewport queries, the card cannot know that. It sees the viewport width and applies the md: styles, which may assume 768px of space. The result is a card that overflows or wraps awkwardly because it made a layout decision based on the wrong width .
The component-reusability problem. A component that uses viewport queries is coupled to the page’s layout. It assumes that when the viewport is md, it will have enough space. That assumption breaks when the component is placed in a narrow container on a wide screen. A component that uses container queries is decoupled from the page. It responds to the width it is given, wherever it is placed. The same card component works in a sidebar, a grid cell, a modal, and a full-width panel, without any changes. This is the promise of container queries: components that are genuinely self-contained .
The container-query browser support problem. Container queries are a modern CSS feature. The @container rule and the cqw, cqh, and other container units are supported in all modern browsers, but the syntax is different from media queries. Tailwind’s container query variants abstract the syntax: @container on the parent and @md: on the child compile to the correct @container CSS rule. The developer writes Tailwind classes, and the browser receives the native CSS. No plugin is needed in v4 — the support is built into the framework .
The static-value requirement. Container queries have a technical limitation that media queries do not. The browser must be able to resolve the container query condition at parse time. This means the width in @container (width > 28rem) must be a static value. It cannot be a var(), a calc(), or a clamp(). This is a browser limitation, not a Tailwind limitation . Tailwind’s --container-* namespace defines the sizes for container variants, and those values must be static. If a project needs dynamic container sizes, the sizes must be computed outside the query and applied differently.
The trade-off. Custom breakpoints require defining values in CSS and ensuring all breakpoints use the same unit (rem is recommended, and mixing rem with px can produce unexpected ordering) . Container queries require marking containers with @container, which changes the element’s formatting context and can affect absolutely positioned descendants. And container queries cannot be used with dynamic values. The trade-off is between the flexibility of a custom viewport scale and the reusability of container-based components. Both have costs, and both are appropriate for different parts of a design system.
a. Defining custom breakpoints in @theme
Custom viewport breakpoints are defined in the @theme block using the --breakpoint-* namespace. Each variable becomes a variant with the same name.
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
--breakpoint-3xl: 120rem;
}This defines two additional breakpoints: xs at 30rem (480px at the default root font size) and 3xl at 120rem (1920px). Tailwind generates the xs: and 3xl: variants automatically, and they behave like the built-in breakpoints: mobile-first, min-width based, and cascading in the order they are defined .
The default breakpoints remain available. To replace them entirely, set all --breakpoint-* variables to initial:
@theme {
--breakpoint-*: initial;
--breakpoint-tablet: 48rem;
--breakpoint-laptop: 64rem;
--breakpoint-desktop: 80rem;
}The --breakpoint-*: initial line clears the default breakpoints, and the subsequent lines define a new set. The variants become tablet:, laptop:, and desktop: .
Unit consistency matters. Tailwind’s default breakpoints use rem. If custom breakpoints are added in px, the sort order can become inconsistent, because Tailwind cannot resolve the relationship between rem and px at build time. A 1rem breakpoint may be treated as larger than a 999px breakpoint. The recommendation is to use rem for all breakpoints, or to disable the defaults entirely if pixel values are required .
Custom breakpoints generate max-* and min-* variants. When a breakpoint is defined with --breakpoint-md: 768px, Tailwind automatically generates md: (min-width), max-md: (max-width), and min-md: (min-width, explicit) variants . The max-md: variant applies below the breakpoint, and the min-md: variant is equivalent to md: but makes the intent explicit.
b. Using @min-* and @max-* for viewport ranges
The min-* and max-* variants are the range counterparts to the standard breakpoint variants. They are generated automatically from the --breakpoint-* definitions and can be used without additional configuration.
<div class="max-md:hidden min-lg:flex">
Visible between md and lg
</div>The max-md:hidden class hides the element below the md breakpoint. The min-lg:flex class makes it a flex container at lg and above. Together, the element is hidden below md and at lg, and visible only between md and lg (when neither condition applies, the base display is used) .
The max-* variant uses a strict less-than comparison. max-md: applies at widths less than 768px, not less than or equal to 768px. This means there is no overlap between md: and max-md: — an element at exactly 768px is covered by md: but not by max-md: .
Ranges can be stacked. To apply a style only within a specific range, stack a min-* and a max-* variant:
<div class="min-md:max-lg:bg-blue-100">
Blue only between md and lg
</div>The element receives bg-blue-100 only when both conditions are true: the viewport is at least md and less than lg. The stacking order in the class name does not affect the result — min-md:max-lg: and max-lg:min-md: are equivalent .
c. Container queries with @container and @sm:, @md:, @lg:
Container queries require two parts: a parent marked as a container, and children with container variants.
The parent receives the @container class:
<div class="@container">
<div class="flex flex-col @md:flex-row">
...
</div>
</div>The @container class establishes the element as a query container. Its inline size (width) becomes the reference for any @*: variants used by its descendants. The @md:flex-row variant applies when the container’s width is at least md (the container breakpoint value, not the viewport breakpoint value) .
Container breakpoints have their own scale. The @sm:, @md:, @lg: container variants use the --container-* namespace, not --breakpoint-*. The default container sizes are different from the viewport sizes. In v3’s plugin, the container sizes matched the max-width scale: @sm was 24rem (384px), @md was 28rem (448px), @lg was 32rem (512px) . This means a container at 448px triggers @md:, while a viewport at 448px does not trigger md:. The two scales are independent .
Named containers. When multiple containers are nested, a child can target a specific container by name. The parent is marked with @container/<name>, and the child uses @<breakpoint>/<name>::
<main class="@container/main">
<aside class="@container/sidebar">
<nav class="@sm/sidebar:block @lg/main:flex">
...
</nav>
</aside>
</main>The @sm/sidebar: variant queries the sidebar container’s width. The @lg/main: variant queries the main container’s width. Without the name, the nearest ancestor container is used .
Max-width container queries. The @max-* variant applies below a container breakpoint:
<div class="@container">
<nav class="@max-md:hidden">Desktop nav</nav>
<nav class="@md:hidden">Mobile nav</nav>
</div>The @max-md:hidden class hides the element when the container is narrower than md. The @md:hidden class hides it when the container is at least md. Together, they show the appropriate navigation based on the container’s width, not the viewport’s .
Container query ranges. Stacking @min-* and @max-* container variants creates ranges:
<div class="@container">
<div class="@sm:@max-lg:bg-blue-100">
Blue only when container is between sm and lg
</div>
</div>The @sm: and @max-lg: conditions must both be true for the style to apply .
The static-value limitation. The --container-* values must be static. If a value contains var(), calc(), or clamp(), the container query variant silently fails — no CSS is generated, and no error is shown. This is a browser limitation: the browser cannot resolve dynamic values in container query conditions at parse time. The --breakpoint-* namespace does not have this limitation because media queries are resolved differently .
Complete Example Session
<!-- ============================================
PART 1: CUSTOM VIEWPORT BREAKPOINTS
============================================ -->
<!-- Define custom breakpoints in CSS. -->
<style type="text/tailwindcss">
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
--breakpoint-3xl: 120rem;
}
</style>
<!-- The xs and 3xl variants are now available. -->
<div class="hidden xs:block 3xl:flex">
Visible on small phones and large monitors
</div>
<!-- ============================================
PART 2: VIEWPORT RANGES WITH @min-* AND @max-*
============================================ -->
<!-- Show an element only between md and xl. -->
<div class="hidden md:max-xl:block">
Visible only between md and xl
</div>
<!-- The md: and max-xl: conditions must both be true. -->
<!-- ============================================
PART 3: THE CONTAINER QUERY BASICS
============================================ -->
<!-- A card component that responds to its own width. -->
<div class="@container">
<article class="flex flex-col @sm:flex-row @lg:grid @lg:grid-cols-3">
<img src="/thumb.jpg" class="w-full @sm:w-32 @lg:w-full" />
<div class="@sm:ml-4 @lg:ml-0">
<h3 class="text-lg @sm:text-xl @lg:text-2xl">Title</h3>
<p class="text-sm @lg:text-base">Description</p>
</div>
</article>
</div>
<!-- ============================================
PART 4: THE CARD IN DIFFERENT CONTAINERS
============================================ -->
<!-- The same card component, in a narrow sidebar
and a wide main panel. It responds to the
container width, not the viewport. -->
<!-- Narrow sidebar: card stacks vertically -->
<aside class="w-64">
<div class="@container">
<article class="flex flex-col @sm:flex-row">
<!-- stays stacked because container is < @sm -->
</article>
</div>
</aside>
<!-- Wide main panel: card spreads horizontally -->
<main class="flex-1">
<div class="@container">
<article class="flex flex-col @sm:flex-row">
<!-- becomes a row because container >= @sm -->
</article>
</div>
</main>
<!-- ============================================
PART 5: NAMED CONTAINERS
============================================ -->
<!-- When containers are nested, name them to
target specific ones. -->
<main class="@container/main">
<div class="p-8">
<aside class="@container/sidebar">
<nav class="flex flex-col @sm/sidebar:flex-row">
<!-- responds to sidebar width -->
</nav>
</aside>
<article class="prose @lg/main:prose-lg">
<!-- responds to main width -->
</article>
</div>
</main>
<!-- ============================================
PART 6: MAX-WIDTH CONTAINER QUERIES
============================================ -->
<!-- Hide the desktop nav in narrow containers. -->
<div class="@container">
<nav class="@max-md:hidden">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<button class="@md:hidden">
Menu
</button>
</div>
<!-- ============================================
PART 7: CONTAINER QUERY RANGES
============================================ -->
<!-- Apply a style only within a container range. -->
<div class="@container">
<div class="@sm:@max-lg:bg-blue-100 @lg:bg-white">
Blue in medium containers, white in large
</div>
</div>
<!-- ============================================
PART 8: CUSTOM CONTAINER SIZES
============================================ -->
<!-- Override the default container sizes in @theme. -->
<style type="text/tailwindcss">
@theme {
--container-xs: 20rem;
--container-2xl: 48rem;
}
</style>
<div class="@container">
<div class="@xs:flex @2xl:grid">
Responds to custom container sizes
</div>
</div>
<!-- ============================================
PART 9: CONTAINER UNITS
============================================ -->
<!-- Size elements relative to the container. -->
<div class="@container">
<h1 class="text-[5cqw]">Scales with container width</h1>
<div class="w-[50cqw]">Half container width</div>
</div>
<!-- cqw = 1% of container width -->
<!-- cqh = 1% of container height -->
<!-- ============================================
PART 10: THE STATIC-VALUE LIMITATION
============================================ -->
<!-- Container sizes must be static. -->
<!-- THIS FAILS: --container-md contains calc() -->
<style type="text/tailwindcss">
@theme {
/* @md: will silently fail */
--container-md: calc(1rem * 28);
}
</style>
<!-- THIS WORKS: --container-md is a static value -->
<style type="text/tailwindcss">
@theme {
/* @md: works */
--container-md: 28rem;
}
</style>The ten parts show the full range: defining custom viewport breakpoints, using @min-* and @max-* ranges, creating a container-query card, testing it in different parent widths, naming nested containers, using @max-* container queries, stacking ranges, customizing container sizes, using container units, and avoiding the static-value limitation.
Quick Reference
Custom Breakpoint Variables
| Variable | Purpose |
|---|---|
--breakpoint-* | Defines a viewport breakpoint in @theme |
--breakpoint-*: initial | Clears a default breakpoint |
--breakpoint-*: initial (all) | Clears all default breakpoints |
Viewport Range Variants
| Variant | Meaning |
|---|---|
md: | Min-width, at md and above |
max-md: | Max-width, below md |
min-md: | Explicit min-width, same as md: |
min-md:max-lg: | Range between md and lg |
Container Query Basics
| Class/Variant | Meaning |
|---|---|
@container | Marks an element as a query container |
@sm:, @md:, @lg: | Container min-width variants |
@max-md: | Container max-width variant |
@container/name | Named container |
@md/name: | Variant targeting named container |
Container Sizes vs Viewport Sizes
| Variant | Default value | Namespace |
|---|---|---|
sm: | 640px | --breakpoint-sm |
@sm: | 384px (24rem) | --container-sm |
md: | 768px | --breakpoint-md |
@md: | 448px (28rem) | --container-md |
lg: | 1024px | --breakpoint-lg |
@lg: | 512px (32rem) | --container-lg |
Common Container Patterns
| Pattern | Classes |
|---|---|
| Stack to spread | flex flex-col @sm:flex-row |
| Single to multi-column | grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 |
| Hide in narrow containers | @max-md:hidden |
| Show only in narrow | @md:hidden |
| Range | @sm:@max-lg:bg-blue-100 |
Best Practices
✅ Do This:
/* Define custom breakpoints in @theme */
@theme { --breakpoint-3xl: 120rem; } /* ✅ */
/* Use rem for all breakpoints */
--breakpoint-xs: 30rem; /* ✅ */
/* Use @container on the layout parent */
<div class="@container"><article class="@md:flex-row"> /* ✅ */
/* Name nested containers */
<div class="@container/sidebar">@sm/sidebar:flex-row</div> /* ✅ */
/* Use static values for container sizes */
--container-md: 28rem; /* ✅ */
/* Test components in multiple container widths */
@sm:flex-row @lg:grid-cols-3 /* ✅ */❌ Don’t Do This:
/* Don't mix px and rem in breakpoints */
--breakpoint-sm: 640px; --breakpoint-md: 48rem; /* ❌ */
/* Don't use dynamic values in container sizes */
--container-md: calc(1rem * 28); /* ❌ */
/* Don't put @container on every div */
<div class="@container"><div class="@container"> /* ❌ */
/* Don't use viewport breakpoints for component internals */
<div class="md:flex-row"> /* ❌ */
/* Don't assume @md equals md */
@md: applies at 448px container, md: at 768px viewport /* ❌ */
/* Don't forget the container has bounded width */
<div class="@container w-full"> /* ❌ */Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
| Container query silently fails | --container-* contains calc() or var() | Use static values |
@md: fires at unexpected width | Confusing container scale with viewport scale | Check --container-* definitions |
| Custom breakpoints out of order | Mixing px and rem | Use rem consistently |
| Container has no effect | Parent has unbounded width | Ensure container has max-width, grid, or flex constraints |
| Nested containers target wrong one | No names | Use @container/name and @md/name: |
max-md: overlaps with md: | Misunderstanding < vs <= | max-md: is strictly less than |
| Container units not working | Container not marked | Add @container to the parent |
Real-World Examples
1. Custom 3xl Breakpoint
@theme { --breakpoint-3xl: 120rem; }2. Replacing All Defaults
@theme { --breakpoint-*: initial; --breakpoint-sm: 40rem; }3. Viewport Range
<div class="hidden md:max-xl:block">4. Container Card
<div class="@container">
<article class="flex flex-col @sm:flex-row">
</div>5. Named Container
<aside class="@container/sidebar">
<nav class="@sm/sidebar:flex-row">
</aside>6. Max-Width Container Query
<nav class="@max-md:hidden">Desktop nav</nav>7. Container Range
<div class="@sm:@max-lg:bg-blue-100">8. Custom Container Size
@theme { --container-xs: 20rem; }9. Container Unit
<h1 class="text-[5cqw]">Scales with container</h1>10. Static Container Value
--container-md: 28rem;Visual
Viewport vs Container Breakpoints
┌──────────────────────────────────────────────────────────────┐
│ VIEWPORT BREAKPOINTS │
│ │
│ Browser window width is the reference. │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ <div class="md:flex-row"> │ │
│ │ │ │
│ │ md: triggers at 768px VIEWPORT width │ │
│ │ regardless of the element's available space │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────┤
│ CONTAINER BREAKPOINTS │
│ │
│ Parent container width is the reference. │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ <div class="@container"> │ │
│ │ <div class="@md:flex-row"> │ │
│ │ │ │
│ │ @md: triggers at 448px CONTAINER width │ │
│ │ (the width of the @container parent) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ The same component can respond differently in a sidebar │
│ and a main panel on the same screen. │
│ │
└──────────────────────────────────────────────────────────────┘Named Containers
┌──────────────────────────────────────────────────────────────┐
│ NAMED CONTAINERS │
│ │
│ <main class="@container/main"> │
│ │ │
│ ├── <aside class="@container/sidebar"> │
│ │ │ │
│ │ └── <nav class="@sm/sidebar:flex-row"> │
│ │ │ │
│ │ └── responds to SIDEBAR width │
│ │ │
│ └── <article class="@lg/main:prose-lg"> │
│ │ │
│ └── responds to MAIN width │
│ │
│ Without names, the nearest ancestor container is used. │
│ Names make the target explicit when containers are nested. │
│ │
└──────────────────────────────────────────────────────────────┘Container Query Ranges
┌──────────────────────────────────────────────────────────────┐
│ CONTAINER QUERY RANGES │
│ │
│ class="@sm:@max-lg:bg-blue-100" │
│ │
│ Container width: │
│ │
│ 0px ────────── @sm ────────── @lg ──────────► │
│ │ │ │ │
│ │ no bg │ bg-blue-100 │ no bg │
│ │ │ │ │
│ │ ├──────────────┤ │
│ │ │ │ │
│ │ │ range where │ │
│ │ │ both condi- │ │
│ │ │ tions true │ │
│ │ │ │ │
│ └──────────────┴──────────────┴──────────────► │
│ │
│ @sm: applies at container >= sm │
│ @max-lg: applies at container < lg │
│ Stacking requires BOTH to be true. │
│ │
└──────────────────────────────────────────────────────────────┘The Static-Value Limitation
┌──────────────────────────────────────────────────────────────┐
│ STATIC VALUES REQUIRED FOR CONTAINER QUERIES │
│ │
│ WORKS: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ --container-md: 28rem; │ │
│ │ │ │
│ │ @md:hidden → @container (width < 28rem) { ... } │ │
│ │ │ │
│ │ CSS is generated. │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ FAILS: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ --container-md: calc(1rem * 28); │ │
│ │ │ │
│ │ @md:hidden → NO CSS GENERATED │ │
│ │ │ │
│ │ The browser cannot resolve calc() in a container │ │
│ │ query condition. Tailwind silently produces nothing. │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ This is a browser limitation, not a Tailwind limitation. │
│ Media queries have the same restriction, which is why │
│ --breakpoint-* values are also resolved statically. │
│ │
└──────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
| Custom breakpoints | Defined in @theme with --breakpoint-* |
| Default breakpoint reset | --breakpoint-*: initial |
| Viewport range variants | min-*, max-*, stacked for ranges |
| Container marker | @container on the parent |
| Container variants | @sm:, @md:, @lg:, @max-md: |
| Named containers | @container/name and @md/name: |
| Container sizes | --container-* namespace, static values only |
| Container scale | Different from viewport scale (@md = 448px, md = 768px) |
| Container units | cqw, cqh, cqi, cqb |
| Plugin | Not needed in v4 — native support |
Key takeaways:
- Custom breakpoints live in CSS now. The
@themedirective with--breakpoint-*replaces thetailwind.config.jsscreens configuration. The variants are generated automatically, andmin-*andmax-*variants are created for each breakpoint . - Container queries respond to the parent, not the viewport. A component with
@containeron its parent and@md:on its children adapts to the width it is given, not the width of the browser window. This makes components genuinely reusable across layouts . - Container breakpoints use a different scale.
@md:triggers at 448px of container width, whilemd:triggers at 768px of viewport width. The two scales are independent and should not be confused . - Named containers disambiguate nested queries. When multiple containers are nested,
@container/nameand@md/name:target a specific container. Without names, the nearest ancestor container is used . @max-*container variants apply below the breakpoint. They are the counterpart to the mobile-first@sm:,@md:variants, and they stack with@min-*to create ranges .- Container sizes must be static.
var(),calc(), andclamp()cannot be used in container query conditions. The--container-*values must be resolvable at parse time. If a dynamic size is needed, the query must be structured differently . - The
@containerclass establishes containment. It changes the element’s formatting context, which can affect absolutely positioned descendants. It should be placed on the layout parent that actually constrains the component’s width, not on every wrapper . - Use rem for custom breakpoints. Mixing
remandpxin the--breakpoint-*namespace can produce unexpected ordering, because Tailwind cannot resolve the relationship between the two units at build time .
Remember: Custom breakpoints and container queries solve two different problems. Custom breakpoints extend the global viewport scale for design systems that need more granularity than the defaults provide. Container queries make components self-contained, so they respond to the width they are given rather than the width of the browser window. The two systems are independent: md: and @md: are different scales, and a component can use both if it needs to respond to both its container and the viewport. Container sizes must be static values, named containers disambiguate nested queries, and the @container class should be placed on the parent that actually constrains the component’s width. The result is a responsive system that is both more flexible and more reusable than viewport queries alone can provide.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!