Tailwind Components

Get Access to Tailwind Components

With access to the free or premium Tailwind components, you get:

Responsive Tailwind UI components
Clean utility-first code
Light, Gray, and Dark themes
Wireframe versions for planning layouts
Copy-paste-ready code optimized for modern browsers

Configure Tailwind and Global Styles

Set up your project to render Pagifye components correctly by following these configuration steps:

Add Tailwind Config

Replace or merge it into your existing tailwind.config.js.

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const colors = {
  "pgfy-primary": {
    600: "#2FD954",
    500: "#3BEB64",
    400: "#72F18B",
    300: "#99F4A8",
    200: "#B8F7C3",
    100: "#D2F9D7",
    50: "#EAFCED",
  },
  "pgfy-wireframe": {
    600: "#1A1A1A",
    500: "#202020",
    400: "#4D4D4D",
    300: "#959595",
    200: "#B9B9B9",
    100: "#CACACA",
    50: "#E4E4E4",
  },
  "pgfy-gray": {
    600: "#06221A",
    500: "#0F2C24",
    400: "#14382E",
    300: "#768782",
    200: "#9FABA7",
    100: "#CFD5D3",
    50: "#E0E3E2",
  },
  "pgfy-red": {
    600: "#EC2D30",
    500: "#F64C4C",
    400: "#EB6F70",
    300: "#F49898",
    200: "#FFCCD2",
    100: "#FEF2F2",
    50: "#FFEBEE",
  },
  "pgfy-yellow": {
    600: "#FE9B0E",
    500: "#FFAD0D",
    400: "#FFC62B",
    300: "#FFDD82",
    200: "#FFF7E1",
    100: "#FFF9EE",
    50: "#FFFBF5",
  },
  "pgfy-green": {
    600: "#0C9D61",
    500: "#47B881",
    400: "#6BC497",
    300: "#97D4B4",
    200: "#C0E5D1",
    100: "#E5F5EC",
    50: "#F2FAF6",
  },
  "pgfy-info": {
    600: "#3A70E2",
    500: "#3B82F6",
    400: "#4BA1FF",
    300: "#93C8FF",
    200: "#BDDDFF",
    100: "#E4F2FF",
    50: "#F1F8FF",
  },
  "pgfy-neutral": {
    black: "#000000",
    white: "#FFFFFF",
    foreground: "#F0EEE9",
    background: "#F7F5F3",
  },
};

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "1rem",
      screens: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1170px",
      },
    },
    extend: {
      colors,
      fontFamily: {
        sans: ["Lato", "sans-serif"],
      },
    },
  },
  plugins: [
    function ({ addBase }) {
      addBase({
        body: {
          "-webkit-font-smoothing": "antialiased",
          "-moz-osx-font-smoothing": "grayscale",
        },
      });
    },
  ],
}

Add Global CSS

Add it into your main or global CSS file (e.g., globals.css or main.css or style.css).

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .hide-calendar-icon::-webkit-calendar-picker-indicator {
    opacity: 0;
  }
}

.no-scrollbar {
  -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

Add Alpine.js

Add this alpinjs script to your root file or main layout, just before the closing </head> tag.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Root UI - Pagifye</title>
	<script src="//unpkg.com/alpinejs" defer></script>
  </head>
  <body>

    <!-- Existing Code -->

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Use Components in Your Code

Browse the Pagifye Component Library and:

Choose a component
Select a theme (Light/Gray/Dark) or Wireframe
Click Copy Tailwind

In your code editor:

Paste the component into your HTML.
Make sure Tailwind CSS is set up in your project
Adjust content, classes, or layout as needed

Each component is built using semantic HTML5 and scoped utility classes.

Customize with Tailwind Utilities

All Pagifye components use standard Tailwind utility classes, so customizing is simple:

Swap colors based on your design tokens in tailwind.config.js
Update spacing, typography, layout, or breakpoints as needed
No custom CSS required—everything is fully Tailwind-compatible

That’s It! You’re now ready to build with Pagifye + Tailwind. All components are designed to be:

Flexible
Scalable
Easy to integrate

Introduction

Quick Start

Setup Guide

Get Help

Get Access to Tailwind Components

Configure Tailwind and Global Styles

Add Tailwind Config

Add Global CSS

Add Alpine.js

Use Components in Your Code

Customize with Tailwind Utilities

​Get Access to Tailwind Components

​Configure Tailwind and Global Styles

​Add Tailwind Config

​Add Global CSS

​Add Alpine.js

​Use Components in Your Code

​Customize with Tailwind Utilities

Get Access to Tailwind Components

Configure Tailwind and Global Styles

Add Tailwind Config

Add Global CSS

Add Alpine.js

Use Components in Your Code

Customize with Tailwind Utilities