Responsive design is easy with Fluid Tailwind Plugin.

#webdev #tailwindcss #nextjs #css

Let's learn how to make responsive design easier with Fluid Tailwind Plugin.

What is Fluid Tailwind Plugin?

Fluid Tailwind Plugin allows you to create fluid typography and spacing utilities in Tailwind CSS. It scales utility classes smoothly between breakpoints using CSS Clamp function.

How CSS Clamp work?

The clamp() function is a CSS function that takes three parameters: a minimum value, a preferred value, and a maximum value. The function returns the preferred value unless it is less than the minimum value, or greater than the maximum value. In those cases, the function returns the minimum or maximum value, respectively.

font-size: clamp(1rem, 2.5vw, 2rem);

Explanation:

The font size will not be smaller than 1rem.
The preferred font size is 2.5vw (2.5% of the viewport width). As the viewport width changes, the font size will scale accordingly.
The font size will not be larger than 2rem.

You can also check the video tutorial on YouTube for better understanding:

Installation

Install the fluid-tailwind package as a dev dependency.

npm install -D fluid-tailwind

Update the tailwind.config.js file to include the plugin. Here is a sample configuration from a Nextjs project:

import fluid, { extract, screens, fontSize } from 'fluid-tailwind'

/** @type {import('tailwindcss').Config} */
module.exports = {
    // content: [
    //   "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    //   "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    //   "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    // ],
    content: {
        files: [
            './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
            './src/components/**/*.{js,ts,jsx,tsx,mdx}',
            './src/app/**/*.{js,ts,jsx,tsx,mdx}',
        ],
        extract,
    },

    theme: {
        extend: {
            colors: {
                background: 'var(--background)',
                foreground: 'var(--foreground)',
            },
        },
        screens,
        fontSize,
    },
    plugins: [fluid],
}

Explanation:

Import the fluid plugin, extract, screens, and fontSize from the fluid-tailwind package.
Add the fluid plugin to the plugins array.
Add the screens and fontSize configurations to the theme object to avoid the plugin limitations.
Add the content object to the configuration. This is required for the plugin to work with the extract function.
- If you have a content array, move that array to the files key in the content object.

Default Tailwind breakpoints

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

Usage and Syntax

You just need to use the regular tailwind utility classes with little modification.
The syntax for fluid typography: ~[class]-[min]/[max]. For example:

~text-xl/4xl
~px-4/8

Example

<button class="~p-4/8">Fluid button</button>

On the sm breakpoint, when the viewport width is less than or equal to 640px, the padding will be px-4. Once you start expanding the screen size, the padding will increase smoothly little by little until the viewport width reaches 1536px. At this point, the padding will be px-8.

Check the following screenshots for a better understanding:

sm breakpoint: p-4 or 1rem or 16px

lg breakpoint:

2xl breakpoint: p-8 or 2rem or 32px

That's how this plugin works. More advanced usages and configurations are available. You can check the official documentation for more details. Or Check my video tutorial on YouTube.
If you love Tailwind then You will love this UI library for sure. Daisy UI is a beautiful, easy, and highly customizable component library for Tailwind CSS. It uses classes to style elements and components. Check the tutorial on Daisy UI: