> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pagifye.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind Components

> Get plug-and-play Tailwind UI components from Pagifye, built with clean utility-first code and easy configuration.

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/Y0rqgEm_iVE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## 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`.

```js tailwind.config.js expandable {3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,81,82,83,84,85,86,87,88,89,90,92,93,94,95,99,100,101,102,103,104,105,106} icon=js lines theme={null}
/** @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`).

```css style.css expandable {5,6,7,8,9,10,11,12,13,14,15,16,17,18} icon=css lines theme={null}
@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.

```html index.html {8} icon=html lines theme={null}
<!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