Penguin UI offers 13 ready-to-use themes. Use them as they are or tweak settings like colors and
border radius to match your style. You can manage theme styles from the theme page or the .
There are two ways to apply themes in your code:
Pick your theme and colors, and the source code for each component will update automatically with preset classes like "bg-blue-500".
<button class="">Click Me</button>
Since the styles are directly in the code, making design changes later can be tricky. Tailwind V4 makes this easier with the new way of setting styles, we call this the modern method, which keeps things more flexible and easier to update.
This method uses a CSS-first approach introduced in Tailwind
CSS v4, where design tokens are
defined as CSS variables for better scalability and easier maintenance.
Tailwind's "@theme" directive makes it easy to declare these tokens, letting you
use utility
classes like "bg-primary".
@theme {
--color-primary: var(--color-blue-500);
}
You can also assign custom color values directly to these tokens:
@theme {
--color-primary: oklch(0.94 0.11 115.03);
}
You can define multiple themes in your CSS and switch between them using the 'data-theme' attribute.
attribute selector.
Simply add them to the Tailwind's '@layer' base. Apply them by using the
'data-theme' attribute on your '<html>' tag.
@layer base {
[data-theme=modern] {
--color-primary: var(--color-blue-500);
}
[data-theme=halloween] {
--color-primary: var(--color-orange-500);
}
[data-theme=pastel] {
--color-primary: var(--color-rose-400);
}
}
<html data-theme="halloween">
Use our CSS generator to get the code for each theme.
You can find all the fonts used in Penguin UI on Google Fonts. After adding them to your project, you can create font tokens.
@theme {
--font-inter: 'Inter', sans-serif;
}
Now you can use them as a class, like 'font-inter', or as variables in your CSS.
h1,
h2,
h3,
h4,
h5 {
font-family: var(--font-inter);
}
You can pick border colors and radius within the theme:
@theme {
--color-outline: var(--color-neutral-300);
--color-outline-strong: var(--color-neutral-800);
--color-outline-dark: var(--color-neutral-700);
--color-outline-dark-strong: var(--color-neutral-300);
--radius-radius: var(--radius-md);
}
You can also turn the border on or off. This works well with the classic method. However, with
the modern method, you can turn off borders by overwriting the '.border' class.
Just keep in mind this will affect all borders, even the ones you want to keep and cause some
design or accessibility issues.
.border {
border: none;
}
Use the '!border' class instead of 'border' on the element that you want to keep the border.
Similarly, you can do this when using multiple themes to turn off the border for a particular theme.
[data-theme=minimal] .border {
border: none;
}