primevue-mirror/apps/showcase/doc/tailwind/ExtensionsDoc.vue

<template>
    <DocSectionText v-bind="$attrs">
        <p>The plugin extends the default configuration with a new set of utilities. All variants and breakpoints are supported e.g. <i>dark:sm:hover:bg-primary</i>.</p>
        <h3>Color Palette</h3>
        <div class="doc-tablewrapper">
            <table class="doc-table">
                <thead>
                    <tr>
                        <th>Class</th>
                        <th>Property</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>primary-[50-950]</td>
                        <td>Primary color palette.</td>
                    </tr>
                    <tr>
                        <td>surface-[0-950]</td>
                        <td>Surface color palette.</td>
                    </tr>
                    <tr>
                        <td>primary</td>
                        <td>Default primary color.</td>
                    </tr>
                    <tr>
                        <td>primary-contrast</td>
                        <td>Default primary contrast color.</td>
                    </tr>
                    <tr>
                        <td>primary-emphasis</td>
                        <td>Default primary emphasis color.</td>
                    </tr>
                    <tr>
                        <td>border-surface</td>
                        <td>Default primary emphasis color.</td>
                    </tr>
                    <tr>
                        <td>bg-emphasis</td>
                        <td>Emphasis background e.g. hovered element.</td>
                    </tr>
                    <tr>
                        <td>bg-highlight</td>
                        <td>Highlight background.</td>
                    </tr>
                    <tr>
                        <td>bg-highlight-emphasis</td>
                        <td>Highlight background with emphasis.</td>
                    </tr>
                    <tr>
                        <td>rounded-border</td>
                        <td>Border radius.</td>
                    </tr>
                    <tr>
                        <td>text-color</td>
                        <td>Text color with emphasis.</td>
                    </tr>
                    <tr>
                        <td>text-color-emphasis</td>
                        <td>Default primary emphasis color.</td>
                    </tr>
                    <tr>
                        <td>text-muted-color</td>
                        <td>Secondary text color.</td>
                    </tr>
                    <tr>
                        <td>text-muted-color-emphasis</td>
                        <td>Secondary text color with emphasis.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </DocSectionText>
</template>

<script></script>