Customization

Configuration

A guide to configuring and customizing your Tailwind installation.

Tailwind CSS v4 is designed to be even more flexible and modern, with a simplified setup that reduces the need for configuration files.

By default, Tailwind v4 does not require a tailwind.config.js file. Instead, it uses a zero-config approach, allowing you to start building immediately with sensible defaults.

Customization is now primarily handled using: CSS variables , Native CSS features, @theme and @layer directives (when needed) 


/* input.css or app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {

  /* Font Family */
  --font-inter: "inter";
  --font-inter-display: "inter-disp";
  --font-inter-tight: "Inter_Tight";
  --font-inter-tight-italic: "Inter_Tight_italic";

  /* Colors */
  --color-theme-bg: #E2DCDC;
  --color-theme-foreground: #F6F6F6;
  --color-theme-black: #000A06;
  --color-theme-green: #007D47;
  --color-theme-green-hover: #026D3F;
  --color-theme-gray: #EDE9E9;

  /* Grid */
  --grid-cols-14: repeat(14, minmax(0, 1fr));
  --grid-cols-15: repeat(15, minmax(0, 1fr));

  /* Animation */
  --animate-slide: Slide 8s ease-in-out infinite;
  --animate-toggle: togglePath 3s ease-in-out infinite;
  --animate-bounce-sm: bounce-sm 0.9s infinite ease-in-out;
  --animate-bounce-sm1: bounce-sm 0.9s infinite 0.15s ease-in-out;
  --animate-bounce-sm2: bounce-sm 0.9s infinite 0.30s ease-in-out;
  --animate-bounce-sm3: bounce-sm 0.9s infinite 0.45s ease-in-out;
  --animate-light-sm: light-sm 0.9s infinite ease-in-out";
  --animate-light-sm1: light-sm 0.9s infinite 0.15s ease-in-out;
  --animate-light-sm2: "light-sm 0.9s infinite 0.30s ease-in-out;
  --animate-light-sm3: light-sm 0.9s infinite 0.45s ease-in-out;
  --animate-spin1: spin1 3s infinite linear;
  --animate-spin: spin 13s infinite linear;
  --animate-animation: spin-slow 6s linear infinite;

  /* Border Radius */
  --radius-10px: 10px;
  --radius-5px: 5px;

  /* Line Height */
  --leading-140: 140%;
  --leading-120: 120%;
  --leading-180: 180%;

  /* Box Shadow */
  --shadow-soft: 0 3px 10px 1px rgba(0, 0, 0, 0.02);
  --shadow-logo: 0 0px 10px 0px rgba(0, 0, 0, 0.05);
  --shadow-strong: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
}

@utility

@utility is a new directive used to create custom utility classes directly in your CSS — without using @layer components or editing tailwind.config.js.

It’s the recommended replacement for creating reusable classes. 

@utility ButtonTheme {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300;
}

Plugins

In Tailwind CSS v4, plugins are no longer configured in a central tailwind.config.js file by default. Instead, you can import and use plugins directly within your CSS using the new @plugin directive. 


@plugin "@tailwindcss/forms";
@plugin "pagedone";

Presets

In Tailwind CSS v4, the traditional presets option from tailwind.config.js is no longer part of the default workflow. Instead of extending shared configurations via presets, Tailwind v4 encourages a CSS-first approach using @import and @theme.

This makes sharing and reusing base styles much simpler and more flexible.


@import "tailwindcss";

/* Import a shared base config (preset replacement) */
@import "@acmecorp/base-tailwind-config";

/* Project-specific customizations */
@theme {

  /* Your custom tokens */
  --color-primary: "#4f46e5";
  --radius-lg: "1rem";
}

Prefix

The prefix option allows you to add a custom prefix to all of Pagedone UI and Tailwind's generated utility classes.

For example, you could add a hs- prefix by setting the prefix option like so:

// tailwind.config.js
module.exports = {
  prefix: 'hs-',
}

In Tailwind v4, you explicitly link config inside your CSS using @config:

/* app.css or main.css */
  
@config "./tailwind.config.js";

@import "tailwindcss";

Now every class will be generated with the configured prefix:


.hs-text-start {
  text-align: "left";
}

.hs-text-center {
  text-align: "center";
}

.hs-text-end {
  text-align: "right";
}

/* etc. */

For more information, visit the official Tailwind CSS configuration.