Skip to main content

​
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:
  1. Choose a component
  2. Select a theme (Light/Gray/Dark) or Wireframe
  3. 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