Styling
Phoenix components can customize the theme’s styles with the following approaches:
Using utility classes
<p class="mb-3">This section explains how to customize Phoenix Tailwind to better fit a project’s design needs. For example, consider customizing the button component:</p><button class="btn btn-phoenix-primary mb-3">Phoenix Button </button><pre><code class="language-html"><button class="btn btn-phoenix-primary">Phoenix Button</button></code></pre>
<h5 class="mt-10 mb-3">Option 1: Hummingbird utility</h5>
<p class="mb-3">Hummingbird’s utility classes allow easy modification of a button’s appearance. For example, the color, variant, size, and other properties can be adjusted as needed.</p><button class="btn btn-primary mr-1 mb-2">Primary </button><button class="btn btn-subtle-secondary mr-1 mb-2">Secondary </button><button class="btn btn-outline-success mr-1 mb-2">Success</button><button class="btn btn-text-info mr-1 mb-3">Info</button><pre><code class="language-html"><button class="btn btn-primary">Primary</button><button class="btn btn-subtle-secondary">Secondary</button><button class="btn btn-outline-success">Success</button><button class="btn btn-text-info">Info</button></code></pre>
<h5 class="mt-10 mb-3">Option 2: Tailwind utility</h5>
<p class="mb-3">Customization can be done using Tailwind utility classes. For example, rounded pill buttons can be created by adding the rounded-full class. All other Tailwind utility classes can be applied as well.</p><button class="btn btn-primary rounded-full mr-1">Pill Button</button><button class="btn btn-subtle-secondary px-12 rounded-full hover:shadow-2xs mb-3">Pill Button</button><pre><code class="language-html"><button class="btn btn-primary rounded-full">Pill Button</button><button class="btn btn-subtle-secondary px-12 rounded-full hover:shadow-2xs">Pill Button</button></code></pre>
<h5 class="mt-10 mb-3">Option 3: <code>@apply</code> directive</h5>
<p class="mb-3">Customization can also be done within a CSS file using Tailwind CSS’s <code>@apply</code> directive.</p><pre class="language-css"><code class="lang-css">@utility btn {
@apply px-12 rounded-full hover:shadow-2xs;
}
</code></pre>This section explains how to customize Phoenix Tailwind to better fit a project’s design needs. For example, consider customizing the button component:
<button class="btn btn-phoenix-primary">Phoenix Button</button>Option 1: Hummingbird utility
Hummingbird’s utility classes allow easy modification of a button’s appearance. For example, the color, variant, size, and other properties can be adjusted as needed.
<button class="btn btn-primary">Primary</button><button class="btn btn-subtle-secondary">Secondary</button><button class="btn btn-outline-success">Success</button><button class="btn btn-text-info">Info</button>Option 2: Tailwind utility
Customization can be done using Tailwind utility classes. For example, rounded pill buttons can be created by adding the rounded-full class. All other Tailwind utility classes can be applied as well.
<button class="btn btn-primary rounded-full">Pill Button</button><button class="btn btn-subtle-secondary px-12 rounded-full hover:shadow-2xs">Pill Button</button>Option 3: @apply directive
Customization can also be done within a CSS file using Tailwind CSS’s @apply directive.
@utility btn {
@apply px-12 rounded-full hover:shadow-2xs;
}
Using CSS variables
<p class="mb-3">Hummingbird components are styled using a set of CSS variables. These variables make it easy to customize styles either globally (across the entire project) or locally (for a specific component).</p>
<p class="mb-7">For example, to update or customize the Button component, override its CSS variables:</p>
<h5 class="mb-3">Option 1: Global variables</h5>
<p>Override the theme variables globally under <code>@theme</code>. This will apply the changes across all components in the project.</p><pre class="language-css"><code class="lang-css">@theme {
--background-color-body-highlight: var(--color-gray-100);
--text-color-body: var(--color-gray-900);
--color-primary: var(--color-blue-500);
--border-color-base: var(--color-gray-300);
--shadow-sm: 0 0.125rem 0.25rem --alpha(var(--color-black) / 7.5%);
}</code></pre>
<h5 class="mt-10 mb-3">Option 2: Local variables</h5>
<p class="mb-3">To customize a specific component, override the CSS variables within that component’s scope. This allows for targeted styling without affecting other components.</p><pre class="language-css"><code class="lang-css">.btn {
--btn-bg: var(--background-color-highlight);
--btn-color: var(--text-color-default);
--btn-hover-bg: var(--color-hover);
--btn-disabled-bg: var(--color-disabled);
--btn-disabled-color: var(--color-disabled-color);
}</code></pre>Hummingbird components are styled using a set of CSS variables. These variables make it easy to customize styles either globally (across the entire project) or locally (for a specific component).
For example, to update or customize the Button component, override its CSS variables:
Option 1: Global variables
Override the theme variables globally under @theme. This will apply the changes across all components in the project.
@theme {
--background-color-body-highlight: var(--color-gray-100);
--text-color-body: var(--color-gray-900);
--color-primary: var(--color-blue-500);
--border-color-base: var(--color-gray-300);
--shadow-sm: 0 0.125rem 0.25rem --alpha(var(--color-black) / 7.5%);
}Option 2: Local variables
To customize a specific component, override the CSS variables within that component’s scope. This allows for targeted styling without affecting other components.
.btn {
--btn-bg: var(--background-color-highlight);
--btn-color: var(--text-color-default);
--btn-hover-bg: var(--color-hover);
--btn-disabled-bg: var(--color-disabled);
--btn-disabled-color: var(--color-disabled-color);
}
