Skip to main content

Tailwind v4 Guide

Learn how to use Fluid Typography with Tailwind CSS v4.

Overview​

Tailwind CSS v4 introduces a new plugin system using CSS imports. Fluid Typography fully supports both the simple and advanced usage patterns.

Simple Setup (No Configuration)​

For zero-config usage, add the plugin directly in your CSS file:

app.css
@import "tailwindcss";
@plugin "fluid-typography";

That's it! All typography classes are now available:

<h1 className="text-display-xl">Hero Title</h1>
<p className="text-body">Body text</p>

With Configuration​

If you need customization, create a config file and reference it:

1. Create Config File​

tailwind.config.js
import fluidTypography from 'fluid-typography';

export default {
  plugins: [
    fluidTypography({
      customScales: {
        'hero': {
          size: [50, 80],
          fontWeight: '900',
          letterSpacing: '-0.02em'
        },
        'mega': {
          size: [60, 120],
          fontWeight: '800'
        }
      },
      minViewportWidth: 320,
      maxViewportWidth: 1920
    })
  ]
};

2. Reference Config in CSS​

app.css
@import "tailwindcss";
@config "./tailwind.config.js";

Now use your custom classes:

<h1 className="text-hero">Custom Hero</h1>
<h1 className="text-mega">Mega Text</h1>

Framework Examples​

Next.js (App Router)​

app/globals.css
@import "tailwindcss";
@plugin "fluid-typography";
app/page.tsx
export default function Home() {
  return (
    <main>
      <h1 className="text-display-xl">Welcome</h1>
      <p className="text-body">Get started with Next.js</p>
    </main>
  )
}

Vite + React​

src/index.css
@import "tailwindcss";
@plugin "fluid-typography";
src/App.tsx
function App() {
  return (
    <div>
      <h1 className="text-h1">Vite + React</h1>
      <p className="text-body">Powered by fluid typography</p>
    </div>
  )
}

Remix​

app/root.css
@import "tailwindcss";
@plugin "fluid-typography";
app/root.tsx
import styles from "./root.css?url";

export const links = () => [{ rel: "stylesheet", href: styles }];

export default function App() {
  return (
    <html>
      <head>
        <Links />
      </head>
      <body>
        <h1 className="text-display-xl">Remix App</h1>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

With Configuration File​

Full Example​

tailwind.config.js
import fluidTypography from 'fluid-typography';

export default {
  plugins: [
    fluidTypography({
      customScales: {
        // Marketing hero
        'hero': {
          size: [48, 96],
          lineHeight: 1.0,
          fontWeight: '900',
          letterSpacing: '-0.03em'
        },
        // Blog title
        'article-title': {
          size: [32, 48],
          lineHeight: 1.2,
          fontWeight: '700'
        },
        // Dashboard metric
        'metric': {
          size: [40, 60],
          fontWeight: '700'
        }
      },
      minViewportWidth: 375,
      maxViewportWidth: 1920
    })
  ]
};
app.css
@import "tailwindcss";
@config "./tailwind.config.js";
components/Hero.tsx
export function Hero() {
  return (
    <section>
      <h1 className="text-hero">Launch Your Product</h1>
      <p className="text-body-lg">Get started in minutes</p>
    </section>
  )
}

Migrating from Tailwind v3​

The migration is straightforward:

Before (Tailwind v3)​

tailwind.config.ts
import type { Config } from 'tailwindcss'
import fluidTypography from 'fluid-typography'

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [fluidTypography],
} satisfies Config

After (Tailwind v4)​

Option 1: No Config

app.css
@import "tailwindcss";
@plugin "fluid-typography";

Option 2: With Config

tailwind.config.js
import fluidTypography from 'fluid-typography';

export default {
  plugins: [fluidTypography()]
};
app.css
@import "tailwindcss";
@config "./tailwind.config.js";

TypeScript Support​

Full TypeScript support is maintained in v4:

tailwind.config.ts
import type { Config } from 'tailwindcss'
import fluidTypography from 'fluid-typography'
import type { PluginOptions } from 'fluid-typography'

const options: PluginOptions = {
  customScales: {
    'hero': {
      size: [50, 80],
      fontWeight: '900'
    }
  }
}

export default {
  plugins: [fluidTypography(options)]
} satisfies Config

Performance Considerations​

Tailwind v4's new engine is much faster. Fluid Typography benefits from:

  • Faster plugin resolution
  • Better tree-shaking
  • Smaller CSS output

The plugin generates only the classes you use, thanks to v4's improved scanning.

Differences from v3​

FeatureTailwind v3Tailwind v4
Plugin syntaxplugins: []@plugin or plugins: []
Config requiredFor content pathsOptional
Import methodJS importCSS @import or JS
PerformanceFastFaster
Type supportFullFull

Common Patterns​

Global CSS with Plugin​

app/globals.css
@import "tailwindcss";
@plugin "fluid-typography";

/* Your custom styles */
body {
  @apply text-body;
}

h1, h2, h3 {
  @apply font-bold;
}

Multiple Config Files​

tailwind.config.js
import fluidTypography from 'fluid-typography';
import customPlugin from './custom-plugin';

export default {
  plugins: [
    fluidTypography(),
    customPlugin()
  ]
};

Conditional Plugin Loading​

tailwind.config.js
import fluidTypography from 'fluid-typography';

const isDev = process.env.NODE_ENV === 'development';

export default {
  plugins: [
    fluidTypography({
      // Use wider range in development
      minViewportWidth: isDev ? 320 : 375,
      maxViewportWidth: isDev ? 2560 : 1920
    })
  ]
};

Next Steps​